組合框中的Javascript數組

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將具有所有數據的數組映射到$.map數組。
$.each都可以使用。
您可以使用$("<option>").val(...).text(...)將option構建得更整潔。
您需要$(function() {...})等待DOM准備就緒。
因為兩個select都已經可見，所以不需要drop.show()
你填充Models上的Models的變化事件。 我認為您的意思是在Makes的change事件上運行它。
您使用的是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 個解決方案

解決方案1
0 2011-12-09 17:04:06

解決方案2
0 2011-12-09 17:04:10

解決方案3
0 已采納 2011-12-09 17:10:49

組合框中的Javascript數組

問題描述

3 個解決方案

解決方案1 0 2011-12-09 17:04:06

解決方案2 0 2011-12-09 17:04:10

解決方案3 0 已采納 2011-12-09 17:10:49

解決方案1
0 2011-12-09 17:04:06

解決方案2
0 2011-12-09 17:04:10

解決方案3
0 已采納 2011-12-09 17:10:49