2

ASP.NETMVC3かみそり構文によって生成されているドロップダウンリストがあります。

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

「ドロップダウンリストの2番目の値を選択した場合は、このもう1つのドロップダウンリストを表示させてください」と言いたいのですが。

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

次のことを試してください。

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

プロパティによって指定される選択されたオプションのインデックスではなく、.val()選択されたオプションを提供することに注意してください。valueselectedIndex

于 2012-09-10T00:15:07.660 に答える
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 に答える
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 に答える