多個級聯下拉菜單

我需要能夠使用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

多個級聯下拉菜單

回答

相關問題