2011-09-28 181 views
0

使用JQuery我希望用戶從下拉列表中選擇一個項目,當他完成它時,會出現另一個項目。應該總共有4個下拉列表。點擊/完成選擇下拉列表,顯示更多選擇下拉列表

JQuery的

<script> 
    $("select: nth-child(1)").click(function() { 
     $("select: nth-child(2)").show(); 
    }); 

    $("select: nth-child(2)").click(function() { 
     $("select: nth-child(3)").show(); 
    }); 
    $("select: nth-child(3)").click(function() { 
     $("select: nth-child(4)").show(); 
    }); 
</script> 

HTML:

<form> 
<div id="one"> 
<select> 
    <option value="1">a</option> 
    <option value="2">b</option> 
</select> 
</div> 
<div id="two"> 
<select> 
    <option value="3">c</option> 
    <option value="4">d</option> 
</select> 
</div> 
<div id="three"> 
<select> 
    <option value="5">e</option> 
    <option value="6">f</option> 
</select> 
</div> 
<div id="four"> 
<select> 
    <option value="7">g</option> 
    <option value="8">h</option> 
</select> 
</div> 
</form> 

回答

0

我已經修改了你的JS和CSS略:

顯示上document.ready()第一選擇顯示在選擇下一個選擇目前的 -

$(document).ready(function(){ 
    $("select").eq(0).show(); 
}); 

$('select').change(function(){ 
    $('select').eq($(this).index('select') + 1).show(); 
}); 

這個代碼執行的例子:JSFiddle