javascript - 检查下拉列表中的值

Question

我有一个由 ASP.NET MVC3 razor 语法生成的下拉列表。

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

我想说的是，“如果选择了下拉列表中的第二个值，则显示另一个下拉列表”

给定以下 javascript，我应该用什么来代替问号？我想避免使用硬编码字符串。

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

编辑我最终在 if 语句中使用的代码如下:

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

Answer 1

这里我已经完成了上述查询的完整解决方案。下面给出了演示链接:

演示 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;
}

演示 http://codebins.com/bin/4ldqp7f