Question

所以我有3个html div / panel，一个是我在我的页面中导航的下拉菜单，一个是桌子，另一个是我试图根据我的第四个下拉选择框加载。我在第四个选择框中有几个选项，根据选择的选项，我的第三个面板将出现并且是正确的。然后，当您选择其他选项时，前一个框隐藏，然后会出现新的正确选项。我一直在努力实现这一目标，但一直都不成功，我将如何做到这一点？

HTML：菜单面板div id是我的第一个div / panel。第二个是持久性的表，第三个是我将在其他多个页面上使用的另一个页面，我试图弹出到表的一侧。

<!-- 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>，然后显示与<div>具有相同ID的$(this).val();：

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

基于选择框隐藏带有jQuery的div

1 个答案: