javascript - JQuery AJAX Dropdown Repeatedly Reset

Question

From this question : JQuery Populate Dropdown by Attribute of tr tag

Is there another way to accomplish this? I can't find the algorithm behind this

JQuery Code VehicleCategory():

function VehicleCategory(){


            $("#category" + counterVehicle).empty();
            $("#category" + counterVehicle).append("<option>Loading.....</option>");
            $("#brand"  + counterVehicle).append("<option value=''>-Select Brand-</option>");
            $("#model" + counterVehicle).append("<option value=''>-Select Model-</option>");
            $("#year" + counterVehicle).append("<option value=''>-Select Year-</option>");
            $("#mileage" + counterVehicle).append("<option value=''>-Select Mileage-</option>");
            $.ajax({
                type:"POST",
                url:"car_dropdown.php?comboBoxName=category",
                contentType:"application/json; charset=utf-8",
                dataType:"json",
                success: function(data){
                    $("#category" + counterVehicle).empty();
                    $("#category" + counterVehicle).append("<option value=''>-Select Category-</option>");
                    $.each(data,function(i,item){
                         $("#category" + counterVehicle).append('<option value="'+ data[i].category +'">'+ data[i].category +'</option>');
                    });

                },

                complete: function(){

                }

            });
        }

When I load the page:

When I click the first dropdown:

When I click the dropdown again and again ^^':

Answer 1

You are calling the VehicleCategory() multiple times.. If you need to do this, then empty the prior contents..

change..

$("#brand"  + counterVehicle).append("<option value=''>-Select Brand-</option>");

to:

$("#brand"  + counterVehicle).html("<option value=''>-Select Brand-</option>");