使用jQuery和JSON数据“过滤”第二个下拉框

Question

我有两个下拉菜单和一个文本框。 首先下拉列表是带有静态值的列表。 第二个下拉列表是从json数组动态填充的。 这是我想要实现的。 根据从第一个下拉列表中选择的值过滤第二个下拉列表。 文本框将根据第二个下拉列表中的所选值输出该值。 这是我当前所在的位置：更改后，我可以填充第二个下拉列表，并可以将匹配的值输出到文本框中。 但是我的第二个下拉列表没有被正确过滤。 而是填充所有可用的选项值。 我在这里检查了不同的帖子，并尝试在追加之前过滤值，但到目前为止没有任何结果。

HTML：

<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>

<label for="CarSize"> Your car's size is : </label>
<input type="text" name="carsize" id="size">

Script:
var a = {
Cars:[
  {
    "id":1,
    "make":"Acura",
    "model":"2.2CL/3.0CL",
    "size":"Car"
  },
{
    "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"
  },
  {
    "id":75,
    "make":"BMW",
    "model":"135",
    "size":"Car"
 },
{
    "id":129,
    "make":"BMW",
    "model":"X3 ",
    "size":"Compact SUV"
  },
  {
    "id":130,
    "make":"BMW",
    "model":"X5",
    "size":"Large SUV"
  }
]
};
   $("#make").change(function(){
if ("#model" !='Select Model')
           $('#model').empty().append($('<option></option>').val('Select Model').html('Select Model'));
else;
            $.each(a.Cars, function (key, value) {
           $("#model").append($('<option></option>').val(value.size).html(value.model

));

});
});

$('#model').change(function () {
    //alert($(this).val());
    //var getModelval = $('#model').val();
    $('#size').val($(this).val());
    //$('#size').val(.val(id));

});

这是一个小提琴链接： http : //jsfiddle.net/kamuflaj/6vvfr/9/

Answer 1

JSON过滤有多个选项。 下面是一种可以更改onchange事件以过滤model下拉列表的方法。

$("#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>').val(car.size).html(car.model));
        }
    });
});

这是更新的小提琴 。