用jquery和json數據「過濾」第二個下拉框

我是一個新手，所以請裸露在我身邊。我有兩個下拉菜單和一個文本框。首先下拉是一個帶有靜態值的列表。第二個下拉菜單是從json數組動態填充的。這是我想達到的。根據從第一個下拉列表中選擇的值篩選第二個下拉列表。文本框將根據從第二個下拉列表中選擇的值輸出值。這是我目前的位置：更改後，我可以填充第二個下拉列表，並且可以將匹配的值輸出到文本框。但是我的第二個下拉菜單沒有正確過濾。相反，它會填充所有可用的選項值。我在這裏檢查了不同的帖子，並在追加之前嘗試過濾值，但迄今爲止無濟於事。請幫忙！謝謝！用jquery和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/

來源

2014-01-27 Kamuflaj

[看看這個鏈接]（http://stackoverflow.com/questions/9483695/filtering-json-data）瞭解如何過濾JSON數據的一些選項。 – Goose

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

這是updated fiddle。

來源

2014-01-27 17:41:12 Goose

謝謝你「鵝」！作品！ – Kamuflaj

很高興你得到它的工作 – Goose

用jquery和json數據「過濾」第二個下拉框

回答

相關問題