php - Jquery used to reset dropdown select menus working on one, but not on another with the same code

Question

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.

Answer 1

我假设#vechicle 是一个选择标签。

$('#vehicle').html(options);

在这一行上，您将其转换为 option tag ，使用 firebug 仔细检查 HTML。

如果你想在你的选择标签上增加价值，你可以做这样的事情

$('#vehicle').append(options);