2014-01-13 27 views
2

我的問題很簡單。考慮通用汽車品牌 - 模型示例如下圖所示:使用JQuery Chained插件鏈接「雙向」

<select id="brand"> 
    <option value="">Choose</option> 
    <option value="audi" class="a1 a3 a4">Audi</option> 
    <option value="bmw" class="3-series 5-series 7-series">BMW</option> 
</select> 

<select id="model"> 
    <option value="">Choose</option> 
    <option value="A1" class="audi">A1</option> 
    <option value="A3" class="audi">A3</option> 
    <option value="A4" class="audi">A4</option> 
    <option value="3-series" class="bmw">3-series</option> 
    <option value="5-series" class="bmw">5-series</option> 
    <option value="7-series" class="bmw">7-series</option> 
</select> 

我可以很容易地鏈模型來使用jQuery鏈式插件的品牌,就像這樣:

$("#model").chained("#brand"); 

但我想它的工作反過來以及。所以如果汽車品牌選擇是空的,我想要完整的車型列表。在第二個選擇中選擇A1,然後在第一個下拉列表中選擇Audi。

我只是加入這一行:

$("#brand").chained("#model"); 

But that doesn't work, as it renders both selects readonly (see jsFiddle).有沒有一種方法可以達到我想要什麼?

+2

看起來很簡單的代碼無需插件。 – epascarello

+3

@epascarello酷 - 顯示我們的答案! – Barney

回答

0

不熟悉的鏈接功能,但你應該能夠做這樣的事情:

$("#brand").change(function(){ 
    if($("#model").val()==""){ 
    $("#model").val($("#brand:selected").attr("class")); 
    } 
});