Question

Using JQuery I want the user to select an item from a drop down list and when he completes it, another one appears. There should be a total of 4 drop down lists.

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

I have modified your js and css slightly:

Show the first select on document.ready() Show the next select on selection of the current one –

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

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

An example of this code execution: JSFiddle