基于选择框隐藏与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

回答

相关问题