基於選擇框隱藏與jQuery div

所以我有3個html divs/panel，其中一個是我的下拉菜單，通過我的網頁導航，一個是表格，另一個是我嘗試基於第四個下拉選擇框。我在第四個選擇框中有幾個選項，根據選擇的選項，我的第三個面板將顯示並且是正確的。然後，當您選擇另一個選項時，先前的方框隱藏，然後出現新的正確方框。我一直在努力做到這一點，但一直都不成功，我會如何去做這件事？基於選擇框隱藏與jQuery div

HTML：菜單面板div id是我的第一個div /面板。其次是表格，這將是持久的，第三個是我將在多個其他頁面上使用的另一個頁面，我試圖彈出到表格的一側。

<!-- begin col-2 --> 
    <div class="col-md-2"> 
     <div id="menu-panel"></div> 
     <!-- begin panel --> 
     <div class="panel panel-inverse"> 
      <div class="panel-heading"> 
       <div class="panel-heading-btn"> 
        <a href="javascript:;" class="btn btn-xs btn-icon btn-circle btn-default" data-click="panel-expand"><i class="fa fa-expand"></i></a> 
       </div> 
       <h4 class="panel-title">Digital Inputs</h4> 
      </div> 
      <div class="alert alert-info fade in"> 
       <button type="button" class="close" data-dismiss="alert"> 
        <span aria-hidden="true">&times;</span> 
       </button> 
       Click on a Digital Input to edit its properties. 
      </div> 
      <div class="panel-body"> 
       <table id="data-table" class="table table-striped table-bordered nowrap" width="100%"> 
        <thead> 
         <tr> 
          <th>Input</th> 
          <th>Name</th> 
         </tr> 
        </thead> 
        <tbody> 
         <tr class="gradeA"> 
          <td id = "digital-input-number">1</td> 
          <td id = "digital-input-name">Digital Input 1</td> 
         </tr> 
         <tr class="gradeA"> 
          <td id = "digital-input-number">2</td> 
          <td id = "digital-input-name">Digital Input 2</td> 
         </tr> 
         <tr class="gradeA"> 
          <td id = "digital-input-number">3</td> 
          <td id = "digital-input-name">Digital Input 3</td> 
        </tbody> 
       </table> 
      </div> 
     </div> 
     <!-- end panel --> 
    </div>

我的第四個下拉框：

$("#vbottom").on("change", function(event){ 
       //alert("hi"); 

       var selection = $("#vbottom option:selected").text(); 

       console.log(selection); 

       switch (selection) { 
        case "Basic Settings": 
         menuPageLoad("#/ajax/settings/device_settings/digital_inputs/manage/basic_settings.html"); 
         break; 
        case "Normally Open or Closed Configuration": 
         menuPageLoad("#/ajax/settings/device_settings/digital_inputs/manage/normally_open_or_closed.html"); 
         break; 
        case "Value Labels and Alarming Statuses": 
         menuPageLoad("#/ajax/settings/device_settings/digital_inputs/manage/value_labels_and_alarming.html"); 
         break; 
        case "Timers and Counters": 
         menuPageLoad("#/ajax/settings/device_settings/digital_inputs/manage/timers_and_counters.html"); 
         break; 
        case "Preventative Maintenance Reminders": 
         menuPageLoad("#/ajax/settings/device_settings/digital_inputs/manage/preventative_maintenance_reminders.html"); 
         break; 
         case "xxx": 
          break; 
        } 

      });

第三面板我試着去有開到一邊

來源

2017-06-13 J. Doe43

您正在尋找$(this).val();。如果您將其應用於<select>，它將得到所選<option>的值。然後，您可以用它來隱藏所有<div> s，然後顯示<div>具有相同ID爲$(this).val();：

$('#selectbox').change(function() { 
 
    var hidden = $(this).val(); 
 
    $(this).siblings('div.hideShowDivs').hide(); 
 
    $(this).siblings('div.hideShowDivs#div' + hidden).show(); 
 
});

#div1 { 
 
    background-color: red; 
 
} 
 
#div2 { 
 
    background-color: yellow; 
 
} 
 
#div3 { 
 
    background-color: blue; 
 
} 
 
.hideShowDivs { 
 
    border: 1px solid black; 
 
    display: none; 
 
    height: 50px; 
 
    width: 200px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> 
 
<select id="selectbox"> 
 
    <option value="0" selected>None</option> 
 
    <option value="1">Option 1</option> 
 
    <option value="2">Option 2</option> 
 
    <option value="3">Option 3</option> 
 
</select> 
 
<div id="div1" class="hideShowDivs"></div> 
 
<div id="div2" class="hideShowDivs"></div> 
 
<div id="div3" class="hideShowDivs"></div>

來源

2017-06-13 19:48:11

基於選擇框隱藏與jQuery div

回答

相關問題