爲什麼div不顯示/隱藏jQuery中的選擇選項

-1

當我從select下拉菜單中選擇一個選項時，我需要隱藏特定div。
例如
當文檔加載沒有DIV將顯示
當我們選擇1個選項然後OneLevel將顯示
當我們選擇2選項然後TwoLevel將顯示
當我們選擇1個選項然後ThreeLevel將顯示爲什麼div不顯示/隱藏jQuery中的選擇選項

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

來源

2017-03-17 Sunil Kumar

元素怎麼能有2個IDS？ – Rajesh

你不能寫這樣的「Level OneLevel」。你可以這樣寫在課堂上。 –

如果id包含空格，則它不是合法的HTML。你不應該期望這個工作。這是HTML 4.01規範的相關部分。 http://www.w3.org/TR/html401/types.html#type-name –

我不認爲一個元素可能有多個ID，你應該在id =「OneLevel」或id =「One」等數字上使用class =「level」和id，並在你的hide/show selector使用一些如$（「。level＃One」）。hide（）;

有關的多個ID的詳細信息：Can an html element have multiple ids?

來源

2017-03-17 07:04:48

有在兩個HTML缺陷少& JS 當你寫的id id="Level OneLevel"這是尷尬。 id需要是唯一的。

使用Level作爲普通的類。使用這個類來隱藏所有的div #Level#TwoLevel &等是錯誤的。沒有與id沒有DOM元素此

$(".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>

DEMO

來源

2017-03-17 07:05:41 brk

你爲什麼不做一個片段？假設你沒有特別製作一個。 – Rajesh

這裏有一個如何將其與顯著痛苦少改寫寫一個例子。我們使用名爲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>

來源

2017-03-17 07:07:29 Neil

你不能到多個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>

來源

2017-03-17 07:08:04 aje

你不需要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>

來源

2017-03-17 07:08:45 Rajesh

感謝您的正確答案。它的工作菲林。只有一個問題是，當我選擇第一個選項「選擇」，然後顯示第三格。 –

@SunilKumar感謝您指出。已經糾正它。 :-) – Rajesh

我使用此代碼，現在它的工作 - '功能WorkflowLevel（obj）var selected = $（「option：selected」，obj）.index（）; if（selected == 0） $（「。Level」）。hide（）; （「.Level」）。hide（）。eq（selected-1）.show（）;其他 else $ }' –

$(".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的Class數據屬性ID應該是唯一的
使用過濾器來選擇具有數據屬性等於選項選擇的值在div

來源

2017-03-17 07:09:46 guradio

爲什麼div不顯示/隱藏jQuery中的選擇選項

回答

相關問題