Checking values in a drop down

Question

I have a drop down list that's being generated by ASP.NET MVC3 razor syntax.

<div id="list" style="display:none; float:left;">@Html.DropDownListFor(x => x.PromoType, Model.PromoTypes)</div>

I'm trying to say, "If the second value in the drop down list is picked, make this other drop down list appear"

Given the following javascript, what do I put in place of the question marks? I want to avoid using hard-coded strings.

<script type="text/javascript">
    $(function () {
        $('#list select').change(function () {
            if ($("#list select").val() == ??????????) {
                $("#over").show();
                $("#product").hide();
            }
            else if ($("#list select").val() == ??????????) {
                $("#product").show();
                $("#over").hide();
            }
            else {
                $("#over").hide();
                $("#product").hide();
            }
        });
    });
</script>

EDIT The code I ended up using in the if statements was as follows:

$("#list select")[0].selectedIndex == 1

Answer 1

Here i have done complete solution for above query. here demo link is given below:

Demo http://codebins.com/bin/4ldqp7f

HTML

<select id="mylist">
  <option value="default">
    --Select--
  </option>
  <option value="1">
    One
  </option>
  <option value="2">
    Two
  </option>
  <option value="3">
    Three
  </option>
  <option value="4">
    Four
  </option>
  <option value="5">
    Five
  </option>
</select>
<div id="list">
  <select>
    <option>
      Option1
    </option>
  </select>
  <select>
    <option>
      Option1
    </option>
    <option>
      Option2
    </option>
  </select>
  <select>
    <option>
      Option1
    </option>
    <option>
      Option2
    </option>
    <option>
      Option3
    </option>
  </select>
  <select>
    <option>
      Option1
    </option>
    <option>
      Option2
    </option>
    <option>
      Option3
    </option>
    <option>
      Option4
    </option>
  </select>
  <select>
    <option>
      Option1
    </option>
    <option>
      Option2
    </option>
    <option>
      Option3
    </option>
    <option>
      Option4
    </option>
    <option>
      Option5
    </option>
  </select>
</div>

JQuery

$(function() {
    $("#mylist").change(function() {
        var selIndex = this.selectedIndex;
        if (selIndex > 0) {
            $("#list select").hide();
            for (i = 0; i < selIndex; i++) {
                $("#list select:eq(" + i + ")").show(400);
            }
        } else {
            $("#list select").hide(300);
        }
    });
});

CSS

#list select{
  display:none;
}

Demo http://codebins.com/bin/4ldqp7f

Answer 2

Try the following:

if (this.selectedIndex == 1) {
  // Second value of the dropdown was picked (index starts at 0)
  $("#over").show();
  $("#product").hide();
}

Note that .val() gives you the selected option's value, not the index of the selected option, which is given by the selectedIndex property.

Answer 3

Since you are using jQuery you can try this

$('#list select').on('change', function(){
    if($(this).prop("selectedIndex")==0) // First item
    {
        // First item is selected
    }
    else if($(this).prop("selectedIndex")==1) // second item
    {
        // second item is selected
    }
});