多个级联下拉列表
[英]Multiple Cascading Dropdowns
问题描述
I need to be able select multiple vehicles on a web page using JQuery. 
我需要能够使用JQuery在网页上选择多个车辆。 Selecting the Make in the first dropdown populates the second dropdown with the Models for that Make. 选择第一个下拉列表中的Make，将使用该Make的Models填充第二个下拉列表。
ddlMake1 should populate ddlModel1
ddlMake2 should populate ddlModel2
ddlMake3 should populate ddlModel3
Initially populating the dropdowns works fine, and if I only add one set, it works just fine. 最初填充下拉列表工作正常，如果我只添加一个集合，它工作得很好。 When I add a second or third set, it populates all sets properly, but if I select any of the makes, it populates the Models in the last set. 当我添加第二个或第三个集合时，它会正确填充所有集合，但如果我选择任何一个集合，它会填充最后一个集合中的模型。
selecting ddlMake1/2/3 populates ddlModel3
I would like he model to be 'connected' to it's make. 我希望他的模特能够“连接”它的制作。 Where am I going wrong? 我哪里错了？
<body>
<select id="ddlMake1"></select><select id="ddlModel1"></select><br />
<select id="ddlMake2"></select><select id="ddlModel2"></select><br />
<select id="ddlMake3"></select><select id="ddlModel3"></select>
</body>
<script>
$(document).ready(function () {
loadDropdownData('ddlMake1', 'ddlModel1');
loadDropdownData('ddlMake2', 'ddlModel2');
loadDropdownData('ddlMake3', 'ddlModel3');
});
</script>
function loadDropdownData(make, model) {
var data = {
'Acura': { 'CSX': [], 'EL': [], 'ILX': []},
'Audi': { 'A4': [], 'A5': [], 'A6': []},
'BMW': { '1 Series': [], '2 Series': [], '3 Series':[]}
};
$a = $("#" + make);
$b = $("#" + model);
$a.html('');
for (var prop in data) {
var first = prop;
$a.append($("<option>").attr("value", first).text(first));
}
$a.change(function () {
var firstkey = $(this).val();
$b.html('');
for (var prop in data[firstkey]) {
var second = prop;
$b.append($("<option>").attr("value", second).text(second));
}
}).change();
} }
2 个解决方案
解决方案1
1 2014-05-22 00:16:26
Problem is scope of variables, use this: 问题是变量的范围，使用这个：
var $a = $("#" + make);
var $b = $("#" + model);
解决方案2
1 已采纳 2014-05-22 00:50:23
your $b variable was being declared outside of the scope of your function. 你的$ b变量被声明在你的函数范围之外。 By adding var you create the variable new every time the function is called. 通过添加var，每次调用函数时都会创建变量new。
http://jsfiddle.net/35yyv/1/ http://jsfiddle.net/35yyv/1/
$(document).ready(function () {
loadDropdownData('ddlMake1', 'ddlModel1');
loadDropdownData('ddlMake2', 'ddlModel2');
loadDropdownData('ddlMake3', 'ddlModel3');
});
function loadDropdownData(make, model) {
var data = {
'Acura': { 'CSX': [], 'EL': [], 'ILX': []},
'Audi': { 'A4': [], 'A5': [], 'A6': []},
'BMW': { '1 Series': [], '2 Series': [], '3 Series':[]}
};
var $a = $("#" + make);
var $b = $("#" + model);
$a.html('');
for (var prop in data) {
var first = prop;
$a.append($("<option>").attr("value", first).text(first));
}
$a.change(function () {
var firstkey = $(this).val();
$b.html('');
for (var prop in data[firstkey]) {
var second = prop;
$b.append($("<option>").attr("value", second).text(second));
}
}).change();
}
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.