如何在jQuery中選擇顯示div如果選項

我想顯示一個div，如果我的網頁上選擇2選項之一。然而，我正在努力，我已經檢查了瀏覽器上的控制檯，並把一個斷點和分析，但仍然困惑。我也嘗試了幾個步驟，但仍然沒有。如何在jQuery中選擇顯示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'); 

     });

來源

2017-05-25 cedPound

您的代碼應該工作。如果用戶到目前爲止還沒有做出任何選擇，我仍然做了一些小的修改以隱藏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>

來源

2017-05-25 10:05:08 vijayP

只需使用$(this).val()功能對於這一點，檢查更新的摘要如下

$("#store_select").change(function() { 
 
    if($(this).val() == 'finished') { 
 
     \t $("#completedStores").show(); 
 
     \t $("#notCompletedStores").hide(); 
 
    } else { 
 
     \t $("#completedStores").hide(); 
 
     $("#notCompletedStores").show(); 
 
    }   
 
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="dialog-store" title="Store information"> 
 
       <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" style="display:none;"> 
 
         @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" style="display:none;"> 
 

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

來源

2017-05-25 10:02:53

你可以這樣做

$(document).ready(function() { 

     $('#store_select').on('change', function() { 
      var selectedVal = $(this).val(); 
      if(selectedVal == "finished") 
      { 
       //Do your code here 
      }else 
      { 
       //do other stuff 
      } 
     }); 
    });

來源

2017-05-25 10:03:52

試試下面的代碼（檢查註釋部分，你可以使用這個條件或我使用了條件）

$(document).on("change","#store_select",function() { 
         var selectedValue1 = $(this).find("option:selected").text(); 
          var selectedTextcenterType = $(this).val(); 
          //if (selectedTextcenterType =="Finshed") { OR 
         if (selectedValue1 =="Stores Completed.") { 
          $("#completedStores").show(); 
          $("#notCompletedStores").hide(); 
         } 
         else { 
          $("#completedStores").hide(); 
          $("#notCompletedStores").show(); 
         } 
        });

來源

2017-05-25 10:06:08 GSB

試試這個...

1）添加jQuery參考你的看法

2）使用波紋管代碼

$(document).ready(function() { 
     $('#store_select').change(function() { 
      var currentValue = $(this).val(); 
      switch(currentValue){ 
       case 'finished': 
        $('#completedStores').show(); 
        $('#notCompletedStores').hide(); 
        break; 
       case 'notFinished': 
        $('#completedStores').hide(); 
        $('#notCompletedStores').show(); 
        break; 
       default: 
        $('#completedStores').hide(); 
        $('#notCompletedStores').hide(); 
      } 
     }); 
});

來源

2017-05-25 10:08:37

如何在jQuery中選擇顯示div如果選項

回答

相關問題