多个级联下拉菜单

我需要能够使用JQuery在网页上选择多个车辆。在第一个下拉列表中选择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();

}

来源

2014-05-22 JGow

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

来源

2014-05-22 00:50:23 jnoreiga

这个技巧。非常感谢 – JGow

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

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

来源

2014-05-22 00:16:26 skobaljic

这并获得成功，谢谢。如果我可以将2标记为答案，我会。 – JGow

多个级联下拉菜单

回答

相关问题