My webpage has two dropdown boxes for car makes and models. I want all the models of a selected make to display in the next box. Currently, the models only show up when the dropdown is clicked using the code below.
window.onmousedown = function(e){
this.id = e.target.id;
if(this.id == "vehicle_makes"){
var make = document.getElementById("vehicle_makes").value;
ajaxCall(make);
}
}
However, I would like the JavaScript to trigger when an option from the dropdown is actually selected, not just when it's opened.
Here is the HTML along with some PHP:
<div class="vehicle-search-wrap">
<form method="get" id="searchform" action="<?php bloginfo('url'); ?>">
<div>
<select id="vehicle_makes" name="s">
<?php
foreach($makes as $make){
echo "<option value='". $make ."'>". $make ."</option>";
}
?>
</select>
<select id="model_drop" name="vmodels">
<?php
//no initial options
?>
</select>
<input type="submit" value="Search Vehicle" />
</div>
</form>
</div>