使用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响应,我会填充第二个框。 第二个方框相同,第三个方框填充正确的数据。