组合框中的Javascript数组

Javascript array in combo boxes

本文关键字：Javascript 数组 组合      更新时间：2023-09-26

我已经给出了以下格式的数组，需要将其放入两个下拉框中，一个带有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>

谢谢

  • 您可以使用$.grep过滤出当前的品牌，然后获取该品牌的模型。
  • 您可以使用$.map将包含所有数据的数组映射到make数组。
  • 可以使用$.each
  • 你可以使用$("<option>").val(...).text(...)来构建option更干净一点。
  • 你需要$(function() {...})等待DOM准备好。
  • drop.show()不需要，因为两个select已经可见
  • 您正在Models的变更事件上填充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
    });
});

$(#Makes)搜索ID!不是因为名字!将select name='Makes'更改为id='makes'

试一试:

<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>
相关文章：