单击/完成选择下拉列表时，显示更多选择下拉列表答案

【问题标题】：on click/completion of select drop down list, show more select drop downs单击/完成选择下拉列表时，显示更多选择下拉列表
【发布时间】：2011-09-28 13:51:44
【问题描述】：

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

【问题讨论】：

标签： jquery html forms select drop-down-menu

【解决方案1】：

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

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

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

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

此代码执行示例：JSFiddle

【讨论】：