2

我有一个由 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
4

3 回答 3

2

在这里，我已经完成了上述查询的完整解决方案。这里的演示链接如下：

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

于 2012-09-10T10:52:15.343 回答
2

尝试以下操作：

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

请注意，它.val()为您提供了所选选项的value，而不是所选选项的索引，该索引由selectedIndex属性给出。

于 2012-09-10T00:15:07.660 回答
1

既然你正在使用jQuery你可以试试这个

$('#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
    }
});
于 2012-09-10T00:20:04.820 回答