使用javascript和jquery，用数组结构填充相关的选择框

使用的答案，我已经能够根据另一个选择框的选择填充一个选择框。从服务器端构建的数组结构中提取数据，该数组结构存储在.js文件中，并在html页面中引用

现在我想添加第三个选择框。如果我有3组数据模型，make，选项，类似于以下伪代码：

cars : [Honda[Accord[Lx, Dx]], [Civic[2dr, Hatchback]],
   [Toyota[Camry[Blk, Red]], [Prius[2dr,4dr]]

例如：如果选择本田，则下一个选择框将显示[Accord Civic]，如果选择雅阁，则下一个选择框将显示[Lx Dx]

我怎么能

1是否创建一个数组结构来保存数据？以致

2我可以使用一个选择框中的值来参考下一个选择框所需的值

var cars = [
 {"makes"  : "Honda",
  "models"  : [
    {'Accord' : ["2dr","4dr"]} ,
    {'CRV'  : ["2dr","Hatchback"]} ,
    {'Pilot': ["base","superDuper"] } ]
 },
 {"makes"   :"Toyota",
  "models"  : [
    {'Prius'   : ["green","reallyGreen"]} ,
    {'Camry'   : ["sporty","square"]} ,
    {'Corolla' : ["cheap","superFly"] } ]
 } ] ;              

 alert(cars[0].models[0].Accord[0]); ---> 2dr

谢谢

编辑

我可以创建以下内容，但无法以有助于填充选择框的方式找出引用

var cars = [
 {"makes"  : "Honda",
  "models"  : [
    {'Accord' : ["2dr","4dr"]} ,
    {'CRV'  : ["2dr","Hatchback"]} ,
    {'Pilot': ["base","superDuper"] } ]
 },
 {"makes"   :"Toyota",
  "models"  : [
    {'Prius'   : ["green","reallyGreen"]} ,
    {'Camry'   : ["sporty","square"]} ,
    {'Corolla' : ["cheap","superFly"] } ]
 } ] ;              

 alert(cars[0].models[0].Accord[0]); ---> 2dr

您应该查看选择框操作。 为了你想要的，我想我会为你做正确的工作。 无论如何，如果我是你，我会这样做：

---

当我更改first select时，我执行一个ajax请求。使用ajax响应，我将填充第二个框。第二个框也一样，第三个框中填充了正确的数据。

我更喜欢这样的数据结构：

var carMakers = [
    { name: 'Honda', models: [
            { name: 'Accord', features: ['2dr', '4dr'] },
            { name: 'CRV', features: ['2dr', 'Hatchback'] },
            { name: 'Pilot', features: ['base', 'superDuper'] }
        ]},

    { name: 'Toyota', models: [
            { name: 'Prius', features: ['green', 'superGreen'] },
            { name: 'Camry', features: ['sporty', 'square'] },
            { name: 'Corolla', features: ['cheap', 'superFly'] }
        ]}
];

给出了三个id为“maker”、“model”和“features”的选择列表，您可以用它来操作它们，我相信这是不言自明的：

// returns array of elements whose 'prop' property is 'value'
function filterByProperty(arr, prop, value) {
    return $.grep(arr, function (item) { return item[prop] == value });
}

// populates select list from array of items given as objects: { name: 'text', value: 'value' }
function populateSelect(el, items) {
    el.options.length = 0;
    if (items.length > 0)
        el.options[0] = new Option('please select', '');

    $.each(items, function () {
        el.options[el.options.length] = new Option(this.name, this.value);
    });
}

// initialization
$(document).ready(function () {
    // populating 1st select list
    populateSelect($('#maker').get(0), $.map(carMakers, function(maker) { return { name: maker.name, value: maker.name} }));

    // populating 2nd select list
    $('#maker').bind('change', function() {
        var makerName = this.value,
            carMaker = filterByProperty(carMakers, 'name', makerName),
            models = [];

        if (carMaker.length > 0)
            models = $.map(carMaker[0].models, function(model) { return { name: model.name, value: makerName + '.' + model.name} });

        populateSelect($('#model').get(0), models);
        $('#model').trigger('change');
    });

    // populating 3rd select list
    $('#model').bind('change', function () {
        var nameAndModel = this.value.split('.'),
            features = [];

        if (2 == nameAndModel.length) {
            var makerName = nameAndModel[0], 
                carModel = nameAndModel[1],
                carMaker = filterByProperty(carMakers, 'name', makerName);

            if (carMaker.length > 0) {
                var model = filterByProperty(carMaker[0].models, 'name', carModel)

                if (model.length > 0)
                    features = $.map(model[0].features, function(feature) { return { name: feature, value: makerName + '.' + carModel + '.' + feature} })
            }
        }

        populateSelect($('#feature').get(0), features);
    })

    // alerting value on 3rd select list change
    $('#feature').bind('change', function () { 
        if (this.value.length > 0)
            alert(this.value);
    })
});

---

感谢@Marko Dunic的回答，我能够构建一个数组数据结构，可以引用它来填充3个选择框。我没有使用实现代码，只是因为我没有完全理解它…它的工作原理是发布的。在学习jQuery之后，我将回到这段代码。 我的代码张贴在下面，显然，您对jQuery的引用可能不同

<html><head>
<script language="Javascript" src="javascript/jquery-1.2.6.min.js"></script>
<script type="text/JavaScript">
var cars = [
{ name: 'Honda', models: [
{ name: 'Accord', features: ['2dr', '4dr'] },
{ name: 'CRV', features: ['2dr', 'Hatchback'] },
{ name: 'Pilot', features: ['base', 'superDuper'] }
   ]},
{ name: 'Toyota', models: [
{ name: 'Prius', features: ['green', 'superGreen'] },
{ name: 'Camry', features: ['sporty', 'square'] },
{ name: 'Corolla', features: ['cheap', 'superFly'] }
   ]
 }
];
$(function() {
var options = '' ;
for (var i = 0; i < cars.length; i++) {
    var opt = cars[i].name ;
    if (i == 0){  options += '<option selected value="' + opt + '">' + opt + '</option>'; }
    else {options += '<option value="' + opt + '">' + opt + '</option>'; } 
}
$("#maker").html(options);   // populate select box with array

var options = '' ;
for (var i=0; i < cars[0].models.length; i++) { 
    var opt = cars[0].models[0].name ;
    if (i==0){options += '<option selected value="' + opt + '">' + opt + '</option>';}
    else {options += '<option value="' + opt + '">' + opt + '</option>';} 
}
$("#model").html(options);   // populate select box with array

var options = '' ;
for (var i=0; i < cars[0].models[0].features.length; i++) { 
    var opt = cars[0].models[0].features[i] ;
    if (i==0){options += '<option selected value="' + opt + '">' + opt + '</option>';}
    else {options += '<option value="' + opt + '">' + opt + '</option>';}
}
$("#feature").html(options);   // populate select box with array

$("#maker").bind("click",
    function() {
        $("#model").children().remove() ;       // clear select box
        for(var i=0; i<cars.length; i++) {
            if (cars[i].name == this.value) {
                var options = '' ;
                for (var j=0; j < cars[i].models.length; j++) { 
                    var opt= cars[i].models[j].name ;
                    if (j==0) {options += '<option selected value="' + opt + '">' + opt + '</option>';}
                    else {options += '<option value="' + opt + '">' + opt + '</option>';} 
                }
                break;
            }
        }
        $("#model").html(options);   // populate select box with array

        $("#feature").children().remove() ;     // clear select box
        for(var i=0; i<cars.length; i++) {
            for(var j=0; j<cars[i].models.length; j++) {
                if(cars[i].models[j].name == $("#model").val()) {
                    var options = '' ;
                    for (var k=0; k < cars[i].models[j].features.length; k++) { 
                        var opt = cars[i].models[j].features[k] ;
                        if (k==0){options += '<option selected value="' + opt + '">' + opt + '</option>';}
                        else {options += '<option value="' + opt + '">' + opt + '</option>';}
                    }
                    break;
                }
            }
        }
        $("#feature").html(options);   // populate select box with array
    });

    $("#model").bind("click",
        function() {
            $("#feature").children().remove() ;     // clear select box
            for(var i=0; i<cars.length; i++) {
                for(var j=0; j<cars[i].models.length; j++) {
                    if(cars[i].models[j].name == this.value) {
                        var options = '' ;
                        for (var k=0; k < cars[i].models[j].features.length; k++) { 
                            var opt = cars[i].models[j].features[k] ;
                            if (k==0){options += '<option selected value="' + opt  + '">' + opt  + '</option>';}
                            else {options += '<option value="' + opt  + '">' + opt  + '</option>';}
                        }
                        break ;
                    }
                }
            }
            $("#feature").html(options);   // populate select box with array
    });
});
</script>
</head> <body>
<div id="selection">
<select id="maker"size="10" style="{width=75px}"></select>
<select id="model" size="10" style="{width=75px}"></select>
<select id="feature" size="10"style="{width=75px}"></select>
</div></body></html>

---

我真的很喜欢@Marko Dunic的解决方案，但它不能满足我将ID附加到选项的需要。一旦我附加了ID，我意识到我可以使JS代码更小、更简单。我的解决方案是为以下情况设计的：数据来自关系数据库，JSON输入数据保留带有主键/外键的关系结构。以下是JSON数据：

<html lang="en">
  <head>
    <title>Populate a select dropdown list with jQuery - WebDev Ingredients</title>
    <script type="text/javascript" src="js/jquery-1.4.2.js"></script>
    <script type="text/javascript">
        var types = [ 
            { typeID: 1, name: 'Domestic'},
            { typeID: 2, name: 'Import'},
            { typeID: 3, name: 'Boat'}
        ]
        var makes = [ 
            { typeID: 1, makeID: 1, name: 'Chevy'}, 
            { typeID: 1, makeID: 2, name: 'Ford'}, 
            { typeID: 1, makeID: 3, name: 'Delorean'}, 
            { typeID: 2, makeID: 4, name: 'Honda'}, 
            { typeID: 2, makeID: 5, name: 'Toyota'}, 
            { typeID: 2, makeID: 6, name: 'Saab'} 
        ]       
        var model = [ 
            { makeID: 1,  modelID: 1, name: 'Camaro'}, 
            { makeID: 1,  modelID: 2, name: 'Chevelle'}, 
            { makeID: 1,  modelID: 3, name: 'Nova'}, 
            { makeID: 2,  modelID: 4, name: 'Focus'}, 
            { makeID: 2,  modelID: 5, name: 'Galaxie'}, 
            { makeID: 2,  modelID: 6, name: 'Mustang'}, 
            { makeID: 4,  modelID: 7, name: 'Accord'},
            { makeID: 4,  modelID: 8, name: 'Civic'}, 
            { makeID: 4,  modelID: 9, name: 'Odyssey'}, 
            { makeID: 5,  modelID: 10, name: 'Camry'}, 
            { makeID: 5,  modelID: 11, name: 'Corolla'}
        ]
        // 
        // Put this in a stand alone .js file
        //
        // returns array of elements whose 'prop' property is 'value' 
        function filterByProperty(arr, prop, value) { 
            return $.grep(arr, function (item) { return item[prop] == value }); 
        } 
        // populates select list from array of items given as objects: { name: 'text', value: 'value' } 
        function populateSelect(el, items) { 
            el.options.length = 0; 
            if (items.length > 0) 
                el.options[0] = new Option('please select', ''); 
            $.each(items, function () { 
                el.options[el.options.length] = new Option(this.name, this.value); 
            }); 
        }  
        // initialization 
        $(document).ready(function () { 
            // populating 1st select list 
            populateSelect($('#sType').get(0), $.map(types, function(type) { return { name: type.name, value: type.typeID} }));      
             // populating 2nd select list 
            $('#sType').bind('change', function() { 
                var theModels = filterByProperty(makes, 'typeID', this.value);
                populateSelect($('#sMake').get(0), $.map(theModels, function(make) { return { name: make.name, value: make.makeID} })); 
                $('#sMake').trigger('change'); 
            }); 
             // populating 3nd select list 
            $('#sMake').bind('change', function() { 
                var theSeries = filterByProperty(model, 'makeID', this.value);  
                populateSelect($('#sModel').get(0), $.map(theSeries, function(model) { return { name: model.name, value: model.modelID} })); 
            }); 
        });
    </script>
  </head>
  <body>
    Enter values, click submit, and look at the post parameters
    <form method="get" action="index.php">
            <div id="selection"> 
                <select id="sType" name="type_id" style="{width=75px}"></select> 
                <select id="sMake"  name="make_id" style="{width=75px}"></select> 
                <select id="sModel"  name="model_id" style="{width=75px}"></select> 
            </div>
            <input type="submit">
    </form>
  </body>
</html>  

请注意，我的解决方案改变了功能，使“制作模型”成为第二和第三个文本框，而“国内”、“导入”、“船舶”等则成为第一级。我把模板JS的注释减少到23行，同时保留了良好的格式

JSON数据很容易从SQL查询中呈现，SQL查询缓存在init上的java列表中，因为类型Make模型很少更改。我不使用任何动态AJAX，因为这会使体系结构复杂化，而且我有一个相对较小的可用值列表，所以我只需在页面请求时发送它

---

答案应该尽可能简单，但不能简单-a.爱因斯坦

谢谢你在回答问题时所付出的努力。我尝试了你的代码，它成功了，但是我现在没有时间来学习它到底是如何工作的…稍后会再讨论…但是我使用的是数组结构…我想我现在了解了如何创建这些数组。再次感谢，数据结构实际上是一个Javascript对象。您可以在这里找到一个像样的JSON教程：使用$.grep和$.map，这就是masters笔划。非常好的解决方案，我只是把它作为类似东西的基础，感觉自己是一个更好的程序员。很棒的解决方案。创建3个相关选择框的优秀代码。正是我今天需要的+1用于填补我的jQuery+JSON知识中的漏洞。谢谢您：