2013-12-10 182 views
0

我有兩個下拉當我選擇,例如從值下拉test1的選項,我希望有一個填充基於第一個下拉列表中選擇的值第二個下拉

第二個下拉test2的只顯示有值的選項

<select name="test1" id="test1" onchange="document.getElementById('test2').value=this.value"> 
    <option value="Select">Select</option> 
    <option value="a">a</option> 
    <option value="b">b</option> 
    <option value="c">c</option> 
</select> 


<select id="test2" name="test2"> 
<option value="Select">Select</option> 
    <option value="a">a</option> 
    <option value="a">b</option> 
    <option value="a">c</option> 
    <option value="b">1</option> 
    <option value="b">2</option> 
    <option value="b">3</option> 
    <option value="c">c</option> 
</select> 
+1

你真的不想做這種方式。 。 。每個選項應該有一個獨特的價值。您可以使用「test1」中的值作爲「test2」中的值的前綴(例如,「aa」,「ab」,「ac」,「b1」,「b2」等),但每個值應該獨一無二。 – talemyn

+0

我知道每個值應該是唯一的,但只想知道它是如何完成的HTML目的只 – JackNew

+0

可能的重複[如何用JQuery填充級聯下拉列表](http://stackoverflow.com/questions/18351921/how-使用jQuery來填充一個級聯下拉列表) – Daveo

回答

0

既然你已經標記這與jQuery,如果我不改變你的HTML可言,你可以從這個改變JS在你onchange做到這一點:

document.getElementById('test2').value=this.value 

。 。 。爲此:

$("test2").find("option").hide(); 
$("test2").find("[value^='" + $("test1").val() + "']").show(); 

這將隱藏所有的選項,在「TEST2」下拉列表,然後顯示所有具有與當前選定的「測試1」選項的值開始值的那些的。

注意:如果您選擇更新代碼以僅使用「test1」值作爲「test2」值的前綴,那麼這也可以工作。 ;)

更新:修復了代碼中的拼寫錯誤。

0

就像有人說,你真的不想做這種方式爲每個選項應該有一個獨特的價值....但在這裏是一種方式來完成它:jsFiddle

使用jQuery,你可以檢查test1中所選的option的值,隱藏所有不匹配的test2,然後顯示匹配的value

$('#test1').on('change', function() { 
    $('#test2 option:not(option[value='+$(this).val()+'])').hide(); 
    $('#test2 option[value='+$(this).val()+']').show(); 
}); 
+0

你確定它在chrome中工作,或者只是我的瀏覽器在搞亂? –

+0

應該是,我在Chrome中創建了它。 – Brian

0

或者你可以這樣說:

jQuery(document).ready(function($){ 
    var options = $('#test2 option'); 
    $('#test1').on('change', function(e){ 
     $('#test2').append(options); 
     $('#test2 option[value!=' + $(this).val() +']').remove(); 
    }); 
}); 

fiddle

相關問題