用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数据“过滤”第二个下拉框

回答

相关问题