javascript - 如果在 jQuery 中选择了选项，如何显示 div

Question

如果在我的页面上选择了 2 个选项之一，我将尝试显示一个 div。但是我正在努力我已经检查了浏览器上的控制台并设置了一个断点并进行了分析但仍然感到困惑。我也尝试了几个步骤，但仍然没有。

          <div id="dialog-store" title="Store information" style="display:none;">
                <span class="ui-state-default ui-corner-all" style="float: left; margin: 0 7px 0 0;"><span class="ui-icon ui-icon-info" style="float: left;"></span></span>
                <div style="margin-left: 23px;">
                    <legend class="legend">List of Stores which completed the survey so far</legend>   

                    <select for="postage" id="store_select">
                        <option value="">Please select...</option>
                        <option value="finished" id ="Finshed">Stores Completed.</option>
                        <option value="notFinished" id ="NotFinsh">Stores Not Completed</option>
                    </select>
                    <br />
                    <br />
                    <div id="completedStores" class="displaystore2">
                        @foreach (var item in Model.savedStoresList[i])
                        {
                            <div class="editor-label">
                                @Html.DisplayFor(modelItem => item.StoreName)
                            </div>          
                            <div class="editor-field">
                                @Html.DisplayFor(modelItem => item.StoreNumber) 
                            </div>    
                        }
                    </div>
                    <br />

                    <div id="notCompletedStores" class="displaystore1">

                        @foreach (var term in Model.notsavedStoresList[i])
                        {
                            <div class="editor-label">
                                @Html.DisplayFor(modelItem => term.StoreName)
                            </div>          
                            <div class="editor-field">
                                @Html.DisplayFor(modelItem => term.StoreNumber) 
                            </div>
                        }
                        <br />
                        <br />
                    </div>
                </div>
            </div>

第一个 jquery 代码

    $(document).ready(function () {
        $('#dialog-store').hide();
        //$("#completedStores").hide();

        //$("#notCompletedStores").hide();

        $(function () {
            $("#store_select").change(function () {
                if ($("#Finshed").is(":selected")) {
                    alert("your dumb2");
                    //
                    $("#completedStores").show();
                    $("#notCompletedStores").hide();
                }
                else {
                    $("#completedStores").hide();
                    $("#notCompletedStores").show();
                }
                //if ($("#NotFinsh").is(":selected")) {
                //    $("#notCompletedStores").show();
                //    $("#completedStores").hide();
                //}
                //else {
                //    $("#notCompletedStores").hide();
                //    $("#completedStores").hide();
                //}
            });
        });

第二个 Jquery 代码

        $(document).ready(function () {
            $('#store_select').bind('change', function (e) { 
                if( $('#store_select').val() == 'finished') {
                    $('#completedStores').show();
                    $("#completedStores").css({ display: "inline-block" });
                    $('#notCompletedStores').hide();
                }
                else if( $('#status').val() == 'notFinished') {
                    $('#completedStores').hide();
                    $('#notCompletedStores').show();
                }         
            }).trigger('change');

        });

Answer 1

您的代码应该可以工作。如果用户到目前为止还没有做出任何选择，我仍然做了一些小改动以隐藏 div。

$(document).ready(function() {
  $('#store_select').bind('change', function(e) {
    if ($('#store_select').val() == 'finished') {
      $("#completedStores").show();
      $("#notCompletedStores").hide();
    } else if ($('#store_select').val() == 'notFinished') {
      $("#completedStores").hide();
      $("#notCompletedStores").show();
    } else {
      $("#completedStores").hide();
      $("#notCompletedStores").hide();
    }
  }).trigger('change');

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div style="margin-left: 23px;">
  <legend class="legend">List of Stores which completed the survey so far</legend>

  <select for="postage" id="store_select">
          <option value="">Please select...</option>
          <option value="finished" id ="Finshed">Stores Completed.</option>
          <option value="notFinished" id ="NotFinsh">Stores Not Completed</option>
  </select>
  <br />
  <br />
  <div id="completedStores" class="displaystore2">
    Stores Completed Div
  </div>
  <br />

  <div id="notCompletedStores" class="displaystore1">
    NOT Stores Completed Div
    <br />
    <br />
  </div>
</div>