点击/完成选择下拉列表，显示更多选择下拉列表

Question

使用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> 

Answer 1

我已经修改了你的JS和CSS略：

显示上document.ready()第一选择显示在选择下一个选择目前的 -

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

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

这个代码执行的例子：JSFiddle