关于移动设备的更改事件

Question

I found a couple of answers for this question on the web but none of them seems to be clear enough. I have a form on my php website that contains 3 select tags, the first one has specific options, while the second and the third have no options until something is selected from the first one. Here's the html:

<form class="filterForm">
    <fieldset>
        <div class="form-group col-sm-4">
            <select id="selectBrand" class="form-control">
                <?php foreach ($brands_gr as $brand_gr) { ?> // brands_gr is the array containing the options
                    <option value="<?= $brand_gr[0]["name"]?>"><?= $brand_gr[0]["name"]?></option>
                <?php } ?>
            </select>
        </div>
        <div class="form-group col-sm-4">
            <select id="selectCar" class="form-control">
            </select>
        </div>
        <div class="form-group col-sm-4">
            <select name="spec" id="selectSpec" class="form-control">
            </select>
        </div>
        <div class="col-sm-4">
            <button type="submit" class="btn btn-default"> submit </button>
        </div>
    </fieldset>
</form>

Here's the javascript:

function showcars(){
    var selected = $("#selectBrand").find(":selected").text();
        var selectedIndex = $("#selectBrand").prop('selectedIndex');
            $("#selectCar").find("option").remove().end();
            brands_gr[selectedIndex - 1][1].forEach(function(element) {
                $("#selectCar").append($("<option></option>")
                            .attr("value",element[0]["name"])
                            .text(element[0]["name"] + " - " + element[0]["year"])); 
            }, this);
            showspecs(selectedIndex - 1);
    return false;
}

$("#selectBrand").change(function() {
    showcars();
});

And I have a second function for the second select tag. The code works perfectly on desktop devices, but not on mobile phones. I have tried it on several android phones and it seems like the .change() event is not triggered on mobile. I already tried using onchange="" attribute with the select tag instead of an event listener, and also .blur() instead of .change(), but nothing works.

Any suggestions on how to make my form work on mobile devices will be greatly appreciated as I have been banging my head against the wall for several hours.

Note: I am using only Bootstrap and JQuery, and I prefer not to include any additional libraries.

Answer 1

I found out what was wrong, I doubt that someone else will encounter the same problem but I'll post the answer just in case someone does. I had another function in my code that I didn't include here. This function takes 1 parameter and this parameter has a default value like this:

function foo($parameter = x){
   //do stuff here
}

It seems like this way of specifying a default value for the parameter isn't good for mobile browsers (both Android and IOS) and it somehow was breaking my entire code not only the on change event but also all other on click events. Luckily I didn't necessarily need the default value so I removed it:

function foo($parameter){
   //do stuff here
}

And now everything works as expected. Hope this helps anyone else!