英文:
Drop down menu only set value when it been opened again only on mobile and macos
问题
您的网站上有一个下拉菜单，它在桌面上运行正常，但在移动设备上似乎无法正常触发函数。这可能与移动设备的事件处理方式有关。您可以尝试检查以下几点：
-
确保移动设备上的点击事件是否正确绑定到
districtButtonClick函数。 -
可能需要使用移动设备的特定事件，例如
touchstart，而不是click事件，以确保在移动设备上触发函数。 -
请确保移动设备上的 JavaScript 错误未导致函数停止执行。您可以在移动设备的浏览器控制台中查看是否有错误消息。
-
检查是否有任何移动设备特定的 CSS 样式或布局问题，可能导致下拉菜单在移动设备上无法正常工作。
-
考虑使用移动优化的下拉菜单插件或库，以确保在各种移动设备上都能正常运行。
如果问题仍然存在，您可能需要进一步调试代码以确定具体的问题所在。希望这些建议有助于解决您的问题。
英文:
Hi i have a drop down menu on my website .. it looks like this
<div class="box">
<p>Kerület</p>
<select name="type" class="input" onclick="districtButtonClick(value)" required>
<option class="btn" value="all" >Összes</option>
<option class="btn" value="I">I</option>
<option class="btn" value="II">II</option>
<option class="btn" value="III" value="III">III</option>
<option class="btn" value="IV">IV</option>
<option class="btn" value="V">V</option>
<option class="btn" value="VI">VI</option>
<option class="btn" value="VII">VII</option>
<option class="btn" value="VIII">VIII</option>
<option class="btn" value="IX">IX</option>
<option class="btn" value="X">X</option>
<option class="btn" value="XI">XI</option>
<option class="btn" value="XII">XII</option>
<option class="btn" value="XIII">XIII</option>
<option class="btn" value="XIV">XIV</option>
<option class="btn" value="XV">XV</option>
<option class="btn" value="XVI">XVI</option>
<option class="btn" value="XVII">XVII</option>
<option class="btn" value="XVIII">XVIII</option>
<option class="btn" value="XIX">XIX</option>
<option class="btn" value="XX">XX</option>
<option class="btn" value="XXI">XXI</option>
<option class="btn" value="XXII">XXII</option>
<option class="btn" value="XXIII">XXIII</option>
</select>
</div>
it calls a function for a onClick event and pass a value to the function.... on the desktop it works perfectly.
But when i try it on mobile devices (both android and iPhone) or in macOs, i select a number which apears in the drop down menu as if i selected it, but the function doesnt seems to trigger, only if i reopen the drop down menu..
heres the website on the server if you want to give it a try
http://adingatlan.fejlessz.hu/a/index.html
all search such as Utca which means street kerulet is District
and on the bottom line theres a min and max price works on desktop but on mobile athe district doesnt seems to work
heres the js function as well but i dont think this is the problem
function districtButtonClick(buttonNumber){
console.log(buttonNumber);
let item = grid.querySelectorAll('.box');
//filter = e.target.dataset.filter;
filter = buttonNumber;
if (filter == "all") {
districtBool = false;
} else {
districtBool = true;
}
//console.log(filter);
//console.log(item.length);
if(streetSearchEmpty == true && maxPriceBool == false && minPriceBool == false){
district = districtSearch(filter, item);
console.log(" Kerulet Kereses ");
}
if(streetSearchEmpty == false){
di = searchStreet(searchValue, item);
didi = districtSearch(filter, di);
console.log(" Kerulet Kereses Utcaval");
if(maxPriceBool == true || minPriceBool == true) {
priceSearched = priceSort(minPriceValue, maxPriceValue, didi);
streetPrice = districtSearch(filter, priceSearched);
console.log(" Kerulet Kereses Utcaval majd arral");
}
}
else if (maxPriceBool == true || minPriceBool == true) {
du = priceSort(minPriceValue, maxPriceValue, item);
dudu = districtSearch(filter, du);
console.log(" Kerulet Kereses arral");
if (streetSearchEmpty == false) {
if(streetPrice.length == 0) {
streetsearched = searchStreet(searchValue, dudu);
streetPrice = districtSearch(filter, streetsearched);
console.log(" Kerulet Kereses arral majd uccaval");
}}
}
}
答案1
得分: 1
oclick()在移动设备上无法正常工作，因为在一些移动浏览器中，选择框是以原生方式渲染的。
onchange() 应该可以解决问题。
使用方式如下：
<div class="box">
<p>Kerület</p>
<select name="type" class="input" onchange="districtButtonClick($event)" required>
<option class="btn" value="all" >Összes</option>
<option class="btn" value="I">I</option>
...
然后在JavaScript中可以这样使用：
districtButtonClick(event){
console.log("selected value:", event.target.value);
}
英文:
oclick() doesnt work on mobile because the select is natively rendered in some mobile browsers
onchange() should do the trick.
use it like this:
<div class="box">
<p>Kerület</p>
<select name="type" class="input" onchange="districtButtonClick($event)" required>
<option class="btn" value="all" >Összes</option>
<option class="btn" value="I">I</option>
...
and then in js something along:
districtButtonClick(event){
console.log("selected value:", event.target.value);
}
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论