基于选择框使用jQuery隐藏div

Question

所以我有 3 个 html 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;
                  }

             });

我试图打开第三个面板

Answer 1

您正在寻找$(this).val();。如果将其应用于<select>，它将获得所选<option> 的值。然后您可以使用它来隐藏所有<div>s，然后显示与$(this).val();具有相同ID的<div>：

$('#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>