為什么 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