我需要能够使用 JQuery 在网页上选择多辆车辆。 在第一个下拉列表中选择品牌会使用该品牌的型号填充第二个下拉列表。
ddlMake1 should populate ddlModel1
ddlMake2 should populate ddlModel2
ddlMake3 should populate ddlModel3
最初填充下拉列表工作正常，如果我只添加一组，它工作得很好。当我添加第二个或第三个集合时，它会正确填充所有集合，但如果我选择任何品牌，它会填充最后一个集合中的模型。
selecting ddlMake1/2/3 populates ddlModel3
我希望他的模型能够与其品牌“连接”。我哪里出错了？
<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();
}
最佳答案
您的 $b 变量在您的函数范围之外声明。通过添加 var，您可以在每次调用函数时创建新的变量。
$(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();
}
关于javascript - 多个级联下拉菜单，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/23795789/