Question

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

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

最初填充下拉列表工作正常，如果我只添加一组，它就可以正常工作。当我添加第二组或第三组时，它会正确填充所有集合，但如果我选择任何一个品牌，它会填充最后一组中的模型。

选择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();

}

Answer 1

问题是变量的范围，请使用：

var $a = $("#" + make);
var $b = $("#" + model);

Answer 2

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

多个级联下拉列表

2 个答案: