Question

我已经获得了以下格式的数组，需要将其放入两个下拉框中，一个使用make，另一个使用基于第一个选择的模型。（实际数组很大，但我刚刚包含了前几个）

var aMember = [{
    "Make": "other",
    "Models": ["other"]
}, {
    "Make": "Boat",
    "Models": ["Over 21 ft.", "Under 21 ft."]
}, {
    "Make": "Motorcycle",
    "Models": ["Over 600cc", "Under 600cc"]
}];

我需要一个带有其他，船只和摩托车的制作组合框，选中后会在第二个组合框中填充选项。

我以前几乎没有做过任何JavaScript，但是尝试过以下操作，但是没有用。我真的不知道自己能不能满足我的需求。

<html>
<head>
<script>
var cars =[{"Make":"other","Models":["other"]},{"Make":"Boat","Models":["Over 21 ft.","Under 21 ft."]},{"Make":"Motorcycle","Models":["Over 600cc","Under 600cc"]}];

function populateDropdown(drop, items) {
   drop.empty();
   for(var i = 0; i < items.length; i++) {
      drop.append('<option value=' + i + '>' + items[i].Make + '</option>');
   }
   drop.show();
}

populateDropdown( $('#Makes'), cars );


$('#Models').change(function() {
   var modelIndex = $(this).val();
   var model = Models[modelIndex ];

   populateDropdown( $('#Models'), cars.Models);

});

</script>
</head>
<body onload = "populateDropdown( $('#Makes'), cars );">
<form>


MAKE:
<select name = 'Makes'>
</select>
MODEL:
<select name = 'Models'>
</select>

</select>
</form>
</body>
</html>

由于

Answer 1

$(#Makes)搜索ID！不是为了这个名字！将选择name='Makes'更改为id='makes'

Answer 2

尝试一下：

<html>
<head>
<script>
var cars =[{"Make":"other","Models":["other"]},{"Make":"Boat","Models":["Over 21 ft.","Under 21 ft."]},{"Make":"Motorcycle","Models":["Over 600cc","Under 600cc"]}];

function populateDropdown(drop, items) {
   drop.empty();
   for(var i = 0; i < items.length; i++) {
      drop.append('<option value=' + i + '>' + items[i].Make + '</option>');
   }
   drop.show();
}

$(document).ready(function() {
    populateDropdown( $('#makes'), cars );

    $('#makes').change(function() {
       var index = $(this).val();
       var make = cars[index];

       populateDropdown( $('#models'), make.Models);
    });
});

</script>
</head>
<body>
<form>


MAKE:
<select id="make">
</select>

MODEL:
<select id="models">
</select>

</form>
</body>
</html>

Answer 3

您可以使用$.grep过滤掉当前的品牌，然后获取该品牌的型号。
您可以使用$.map将包含所有数据的数组映射到make数组。
$.each可以使用。
您可以使用$("<option>").val(...).text(...)构建option更清洁。
您需要$(function() {...})等待DOM准备就绪。

drop.show()

select
您正在Models的{{1}}更改事件中填充Models。我认为你的意思是在Makes的改变事件中运行它。
您使用name代替id。此外，您不应在HTML属性中使用=周围的空格。

这是更正后的版本：http://jsfiddle.net/zJTnw/1/。

$(function(){
    var cars = [
        {"Make":"other",
         "Models": ["other"]},

        {"Make":"Boat",
         "Models": ["Over 21 ft.","Under 21 ft."]},

        {"Make":"Motorcycle",
         "Models": ["Over 600cc","Under 600cc"]}
    ];

    function populateDropdown(drop, items) {
        drop.empty();

        $.each(items, function(i, v) { // `i` is index, `v` is element
            drop.append($("<option>").val(v).text(v));
        });
    }

    populateDropdown($('#Makes'), $.map(cars, function(x) {
        return x.Make; // map `cars` to an array of makes
    }));

    $('#Makes').change(function() {
        var make = $(this).val();

        var item = $.grep(cars, function(x) { // get item of this make
            return x.Make === make;
        });

        populateDropdown($('#Models'), item[0].Models); // populate with models
    });
});

组合框中的Javascript数组

3 个答案: