title: On change event for mobile devices
body: <p>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:</p>
  
  <pre><code>&lt;form class="filterForm"&gt;
      &lt;fieldset&gt;
          &lt;div class="form-group col-sm-4"&gt;
              &lt;select id="selectBrand" class="form-control"&gt;
                  &lt;?php foreach ($brands_gr as $brand_gr) { ?&gt; // brands_gr is the array containing the options
                      &lt;option value="&lt;?= $brand_gr[0]["name"]?&gt;"&gt;&lt;?= $brand_gr[0]["name"]?&gt;&lt;/option&gt;
                  &lt;?php } ?&gt;
              &lt;/select&gt;
          &lt;/div&gt;
          &lt;div class="form-group col-sm-4"&gt;
              &lt;select id="selectCar" class="form-control"&gt;
              &lt;/select&gt;
          &lt;/div&gt;
          &lt;div class="form-group col-sm-4"&gt;
              &lt;select name="spec" id="selectSpec" class="form-control"&gt;
              &lt;/select&gt;
          &lt;/div&gt;
          &lt;div class="col-sm-4"&gt;
              &lt;button type="submit" class="btn btn-default"&gt; submit &lt;/button&gt;
          &lt;/div&gt;
      &lt;/fieldset&gt;
  &lt;/form&gt;
  </code></pre>
  
  <p>Here's the javascript:</p>
  
  <pre><code>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($("&lt;option&gt;&lt;/option&gt;")
                              .attr("value",element[0]["name"])
                              .text(element[0]["name"] + " - " + element[0]["year"])); 
              }, this);
              showspecs(selectedIndex - 1);
      return false;
  }
  
  $("#selectBrand").change(function() {
      showcars();
  });
  </code></pre>
  
  <p>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.</p>
  
  <p>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.</p>
  
  <p>Note: I am using only Bootstrap and JQuery, and I prefer not to include any additional libraries.</p>