使用JavaScript和jQuery，填充与数组结构相关的select框
使用这个问题的答案，我已经能够根据另一个select框的select填充select框。 （ 我在这里发布我的答案 ）从数据结构中拉取数据，构build服务器端，存储在.js文件中，并在html页面中引用。
现在我想添加第三个select框。 如果我有3组数据（模型，制造，选项）这样的（伪代码）：
cars : [Honda[Accord[Lx, Dx]], [Civic[2dr, Hatchback]], [Toyota[Camry[Blk, Red]], [Prius[2dr,4dr]] 例如：如果select本田，下一个select框将会有[Accord Civic]，如果selectAccord，则下一个select框将具有[Lx Dx]
我怎么能够
1）创build一个数组结构来保存数据？ 这样
2）我可以使用一个select框的值来引用下一个select框的所需值
谢谢
编辑
我可以创build以下内容，但无法找出将有助于填充select框的引用
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 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'] } ]} ];
给出三个select列表与ID：'制造商'，'模型'和'function'，你可以操纵它们（我相信这是非常自我解释）：
// 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的回答，我能够构build一个可以被引用的数组（数据）结构来填充3个select框。 我没有使用实现代码，只是因为我没有完全理解它…它的工作原理。 以后我会学习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的解决scheme，但是它不符合将ID附加到选项的需求。 一旦我附加了ID，我意识到，我可以使JS代码更小，更简单。 我的解决scheme是为数据来自关系数据库而devise的，JSONinput数据保留与主键/外键的关系结构。 这里是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>
请注意，我的解决scheme改变了function，Make-Model是第二和第三个文本框，Type（国内，import，船等）是第一级。 我把样板JS降低到了23行（less了评论），同时保持了良好的格式。
JSON数据很容易从SQL查询中呈现出来，因为Type-Make-Model很less发生变化，所以SQL在init列表中caching。 我不使用任何dynamic的AJAX，因为这使架构复杂化，我有一个相对较小的可用值列表，所以我只是发送页面请求。
“答案应该尽可能简单，但不要简单” – 爱因斯坦
你应该看看这里select框操作。 对于你想要的，我认为JSON会为你做正确的工作。 无论如何，如果我是你，我会这样做：当我改变首先select，我做一个Ajax请求。 随着Ajax响应，我会填充第二个框。 第二个方框相同，第三个方框填充正确的数据。
