多个级联下拉菜单

Multiple Cascading Dropdowns

本文关键字：下拉菜单 级联      更新时间：2023-09-26

我需要能够在使用JQuery的网页上选择多个车辆。在第一个下拉列表中选择Make将在第二个下拉列表中填充该Make的模型。

ddlMake1应该填充ddlModel1
ddlMake2应该填充ddlModel2
ddlMake3应该填充ddlModel3

最初填充下拉菜单工作良好，如果我只添加一个集合，它工作良好。当我添加第二个或第三个集合时，它会正确地填充所有集合，但是如果我选择任何一个集合，它会填充最后一个集合中的Models。

选择ddlMake1/2/3填充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，您可以在每次调用函数时创建变量new。

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();
}

问题是变量的作用域，使用这个:

var $a = $("#" + make);
var $b = $("#" + model);
相关文章：