I am using the following ajax / jquery / php to pull data into select boxes. After this, I use the code below it to reset the select dropdown menus if the user makes any changed to previous select boxes. The odd thing that is happening is if the user changes the #customer dropdown it resets all of the qty boxes and all of the linetotal calculations as well as the stock dropdowns, but copy and paste the same function onto the #vehicle dropdown for some odd reason it clears the qty text box, clears the linetotal calculation, but leaves the stock dropdown select menu's how they are instead of resetting them to default, this is with the exact same code that WORKS on the #customer dropdown to reset everything on change.
<script type="text/javascript" charset="utf-8">
$(document).ready(function () {
$('#customer').on('change', function () {
$('#vehicle').html("<option value=''>Select</option>"); // add this on each call then add the options when data receives from the request
$.getJSON('select.php', {
customerId: $(this).val()
}, function (data) {
var options = '';
for (var x = 0; x < data.length; x++) {
options += '<option value="' + data[x]['id'] + '">' + data[x]['reg'] + ' - ' + data[x]['make'] + ' - ' + data[x]['model'] + '</option>';
}
$('#vehicle').html(options);
$("select").select2();
});
});
$('#customer').on('change', function () {
$('#qty1').val('');
$('#linetotal1').text('');
$("#stock1").val($("#stock1 option:first").val());
$('#qty2').val('');
$('#linetotal2').text('');
$("#stock2").val($("#stock2 option:first").val());
$('#qty3').val('');
$('#linetotal3').text('');
$("#stock3").val($("#stock3 option:first").val());
$('#qty4').val('');
$('#linetotal4').text('');
$("#stock4").val($("#stock4 option:first").val());
$('#qty5').val('');
$('#linetotal5').text('');
$("#stock5").val($("#stock5 option:first").val());
$('#qty6').val('');
$('#linetotal6').text('');
$("#stock6").val($("#stock6 option:first").val());
});
$('#vehicle').on('change', function () {
$('#qty1').val('');
$('#linetotal1').text('');
$("#stock1").val($("#stock1 option:first").val());
$('#qty2').val('');
$('#linetotal2').text('');
$("#stock2").val($("#stock2 option:first").val());
$('#qty3').val('');
$('#linetotal3').text('');
$("#stock3").val($("#stock3 option:first").val());
$('#qty4').val('');
$('#linetotal4').text('');
$("#stock4").val($("#stock4 option:first").val());
$('#qty5').val('');
$('#linetotal5').text('');
$("#stock5").val($("#stock5 option:first").val());
$('#qty6').val('');
$('#linetotal6').text('');
$("#stock6").val($("#stock6 option:first").val());
});
});
</script>
so if I change the #vehicle select it clears the qty and line total but leaves the stock how it was, if I change the top select for #customer it clears the select just fine, using the same function......
ALL OF THE SELECTS ARE USING THE JQUERY PLUGIN CALLED SELECT2 BY THE WAY.