使用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));
        }
    });
});

這是更新的小提琴 。