为什么 div 在 jQuery 中的选择选项上不显示/隐藏

Question

当我从选择下拉列表中选择一个选项时，我需要隐藏一个特定的 div。
例如
文档加载时不会显示 div
当我们选择 1 个选项时， OneLevel将显示
当我们选择 2 选项时， TwoLevel将显示
当我们选择 1 个选项时，会显示ThreeLevel

 <!DOCTYPE html>
    <html>
    <head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script>
$("#Level").hide();
function WorkflowLevel(obj) {
    var selectBox = obj;
    var selected = selectBox.options[selectBox.selectedIndex].value;

     $("#Level").hide();

    switch (selected) {
    case '0':
        $("#Level").hide();
        break;
    case '1':
        $("#Level").hide();
        $("#Level#OneLevel").show();
        break;
    case '2':
        $("#Level").hide();
        $("#Level#TwoLevel").show();
        break;
    case '3':
        $("#Level").hide();
        $("#Level#ThreeLevel").show();
        break;
    }

}
</script>
</head>
<body>

<select id="WorkflowLevel" class="form-control" name="show_text_area" onchange="WorkflowLevel(this)">
    <option value="0">Select</option>
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
</select>

<div id="Level OneLevel">1</div>
<div id="Level TwoLevel">2</div>
<div id="Level ThreeLevel">3</div>

</body>
</html>

Answer 1

您不需要switch盒。 您可以使用索引位置并相应地切换可见性。

 $(".Level").hide(); function WorkflowLevel(obj) { var selected = $("option:selected", obj).index(); $(".Level").hide(); selected && $(".Level:eq(" + (selected - 1) + ")").show(); }

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <select id="WorkflowLevel" class="form-control" name="show_text_area" onchange="WorkflowLevel(this)"> <option value="0">Select</option> <option value="1">1</option> <option value="2">2</option> <option value="3">3</option> </select> <div class="Level OneLevel">1</div> <div class="Level TwoLevel">2</div> <div class="Level ThreeLevel">3</div>

Answer 2

我认为一个元素不可能有多个 ID，您应该在数字上使用 class="level" 和 id，例如 id="OneLevel" 或只是 id="One" 并在隐藏/显示选择器中使用类似 $( ".level#One").hide();

有关多个 id 的更多详细信息：一个 html 元素可以有多个 id 吗？

Answer 3

html 和 js 都很少有缺陷把 id 写成id="Level OneLevel"比较尴尬。 id必须是唯一的。

使用Level作为通用类。 使用此类隐藏所有 div #Level#TwoLevel & 等是错误的。 没有id为 this 的 DOM 元素

JS

    $(".Level").hide();
    
    function WorkflowLevel(obj) {
      var selectBox = obj;
      var selected = selectBox.options[selectBox.selectedIndex].value;
    
      $(".Level").hide();
    
      switch (selected) {
        case '0':
          $(".Level").hide();
      

    break;
    case '1':
      $(".Level").hide();
      $("#OneLevel").show();
      break;
    case '2':
      $(".Level").hide();
      $("#TwoLevel").show();
      break;
    case '3':
      $(".Level").hide();
      $("#ThreeLevel").show();
      break;
  }

}

HTML

<div id="OneLevel" class="Level">1</div>
<div id="TwoLevel"  class="Level">2</div>
<div id="ThreeLevel"  class="Level">3</div>

演示

Answer 4

这是一个示例，说明如何以明显不那么痛苦的重写来编写它。 我们使用名为showId的自定义属性通过将其与WorkFlowLevel选择的.val()匹配来显示正确的框。 这将使添加更多项目变得容易得多。

 $("#WorkflowLevel").change(function () { $(".Level").hide() $("[showId="+$(this).val()+"]").show(); }).trigger("change");

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <select id="WorkflowLevel" class="form-control" name="show_text_area"> <option value="0">Select</option> <option value="1">1</option> <option value="2">2</option> <option value="3">3</option> </select> <div class="Level" showId="1">1</div> <div class="Level" showId="2">2</div> <div class="Level" showId="3">3</div>

Answer 5

您不能为多个 div 提供相同的id ，它们应该是唯一的。 改用class ，下面是示例。

 $(document).ready(function(){ $(".lvl").hide(); $("#WorkflowLevel").on('change', function(){ $(".lvl").hide(); $("#Level"+$(this).val()).show(); }) })

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> <select id="WorkflowLevel" class="form-control" name="show_text_area" > <option value="0">Select</option> <option value="1">1</option> <option value="2">2</option> <option value="3">3</option> </select> <div id="Level1" class="lvl">1</div> <div id="Level2" class="lvl">2</div> <div id="Level3" class="lvl">3</div>

Answer 6

 $(".Level").hide(); $("#WorkflowLevel").change(function() { $(".Level").hide(); var id = $("option:selected", this).val() $(".Level").filter(function() { return $(this).attr("data-id") == id; }).show() })

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <select id="WorkflowLevel" class="form-control" name="show_text_area"> <option value="0">Select</option> <option value="1">1</option> <option value="2">2</option> <option value="3">3</option> </select> <div class="Level OneLevel" data-id="1">1</div> <div class="Level TwoLevel" data-id="2">2</div> <div class="Level ThreeLevel" data-id="3">3</div>

添加与选项值对应的数据属性
将 ID 更改为 div Level ID的Class应该是唯一的
使用过滤器选择数据属性等于选项选定值的 div

为什么 div 在 jQuery 中的选择选项上不显示/隐藏

问题描述

6 个解决方案

解决方案1
2 2017-03-17 07:08:45

解决方案2
0 2017-03-17 07:04:48

解决方案3
0 2017-03-17 07:05:41

解决方案4
0 2017-03-17 07:07:29

解决方案5
0 2017-03-17 07:08:04

解决方案6
0 2017-03-17 07:09:46

为什么 div 在 jQuery 中的选择选项上不显示/隐藏

问题描述

6 个解决方案

解决方案1 2 2017-03-17 07:08:45

解决方案2 0 2017-03-17 07:04:48

解决方案3 0 2017-03-17 07:05:41

解决方案4 0 2017-03-17 07:07:29

解决方案5 0 2017-03-17 07:08:04

解决方案6 0 2017-03-17 07:09:46

解决方案1
2 2017-03-17 07:08:45

解决方案2
0 2017-03-17 07:04:48

解决方案3
0 2017-03-17 07:05:41

解决方案4
0 2017-03-17 07:07:29

解决方案5
0 2017-03-17 07:08:04

解决方案6
0 2017-03-17 07:09:46