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

这是updated fiddle。

使用jquery和json数据“过滤”第二个下拉框

1 个答案: