Jquery 单击/完成选择下拉列表后，显示更多选择下拉列表

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

$（“选择：第n个子项（1）”。单击（函数（）{
$（“选择：第n个子项（2）”）.show（）；
});
$（“选择：第n个子项（2）”。单击（函数（）{
$（“选择：第n个子项（3）”）.show（）；
});
$（“选择：第n个子项（3）”。单击（函数（）{
$（“选择：第n个子项（4）”）.show（）；
});

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>

A.
B
C
D
E
F
G
H

我稍微修改了你的js和css：

在选择当前文档时显示下一个选择

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

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

此代码执行的一个示例：