如何动态重置 jquery select 选项？

Question

我正在动态使用 select 选项，一切正常，但是当我得到结果并更改 select 选项时，它不会重置结果。 （它的添加结果而不是更新它）。

 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>

如果在结果之后我更改“Select Make”或“Select Model”，它会添加结果 e 但不会更新。 我怎样才能解决这个问题？

Answer 1

您可以使用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>