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");
}}
}
}
>Solution :
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);
}