How reset jquery dynamically select option?

Question

I am using dynamically select option, everything works but when I get result and changing select option it not reset result. (its adding result and not updates it).

 var a = { Cars: [{ "id": 1, "make": "Acura", "model": "RDX", "size": "Car 1" }, { "id": 12, "make": "Acura", "model": "RDX", "size": "Compact SUV" }, { "id": 10, "make": "Acura", "model": "MDX", "size": "Large SUV" }, { "id": 74, "make": "BMW", "model": "128", "size": "Car" }] }; $("#make").change(function () { $('#model').empty().append($('<option></option>').val('Select Model').html('Select Model')); var matchVal = $("#make option:selected").text(); a.Cars.filter(function (car) { if (car.make == matchVal) { $("#model").append($('<option></option>').html(car.model)); //Remove Duplicate Elements var seen = {}; $('option').each(function() { var txt = $(this).text(); if (seen[txt]) $(this).remove(); else seen[txt] = true; }); // } }); }); $("#model").change(function () { var matchVal = $("#model option:selected").text(); a.Cars.filter(function (car) { if (car.model == matchVal) { $("#mydiv").append($('<h1></h1>').html(car.make)); $("#mydiv").append($('<div></div>').html(car.model)); $("#mydiv").append($('<div></div>').html(car.size)); } }); });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script> <select name="make" id="make"> <option value="0">Select Make:</option> <option value="1">Acura</option> <option value="2">BMW</option> </select> <select name="model" id="model"> <option value="model">Select Model</option> </select> <div id="mydiv"></div>

If after result I change "Select Make" or "Select Model" it add result e but not update. How can i fix this?

Answer 1

You can remove the previous result by using empty() :

 var a = { Cars: [{ "id": 1, "make": "Acura", "model": "RDX", "size": "Car 1" }, { "id": 12, "make": "Acura", "model": "RDX", "size": "Compact SUV" }, { "id": 10, "make": "Acura", "model": "MDX", "size": "Large SUV" }, { "id": 74, "make": "BMW", "model": "128", "size": "Car" }] }; $("#make").change(function () { $('#model').empty().append($('<option></option>').val('Select Model').html('Select Model')); var matchVal = $("#make option:selected").text(); a.Cars.filter(function (car) { if (car.make == matchVal) { $("#model").append($('<option></option>').html(car.model)); //Remove Duplicate Elements var seen = {}; $('option').each(function() { var txt = $(this).text(); if (seen[txt]) $(this).remove(); else seen[txt] = true; }); // } }); }); $("#model").change(function () { $("#mydiv").empty(); var matchVal = $("#model option:selected").text(); a.Cars.filter(function (car) { if (car.model == matchVal) { $("#mydiv").append($('<h1></h1>').html(car.make)); $("#mydiv").append($('<div></div>').html(car.model)); $("#mydiv").append($('<div></div>').html(car.size)); } }); });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <select name="make" id="make"> <option value="0">Select Make:</option> <option value="1">Acura</option> <option value="2">BMW</option> </select> <select name="model" id="model"> <option value="model">Select Model</option> </select> <div id="mydiv"></div>