jQueryの選択オプションで表示/非表示にしない理由

-1

選択ドロップダウンからオプションを選択すると、特定のdivを非表示にする必要があります。例えば
文書の負荷は一切のdivは、我々は1つのオプションを選択すると、我々はその後、ThreeLevelがjQueryの選択オプションで表示/非表示にしない理由

が表示されます1つのオプションを選択すると、その後TwoLevelが
が表示されます2オプションを選択すると
が、その後OneLevelが
が表示されます表示されません

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

に等しい属性を持つdiv要素を選択するために、独自の

使用フィルタすべきですか？ – Rajesh

"Level OneLevel"のようにIDを書くことはできません。あなたはそのようなクラスで書くことができます。 –

idに空白が含まれている場合、正式なHTMLではありません。これがうまくいくとは思わないはずです。以下は、HTML 4.01仕様の関連セクションです。 http://www.w3.org/TR/html401/types.html#type-name –

私は1つの要素に複数のIDがあるとは思わないが、id = "OneLevel"やid = "One"のようにclass = "level"とidを使用し、hide/showセレクタ何かを使う$（ "。レベル＃1"）のようなものです。複数のIDの詳細については

：あなたはid="Level OneLevel"としてIDを書き込む際にHTMLの両方でいくつかの欠陥がありますCan an html element have multiple ids?

出典

2017-03-17 07:04:48

は& JS それは厄介です。 idは一意である必要があります。

共通クラスとしてを使用してください。このクラスを使用してすべてのdivを隠す #Level#TwoLevel &などが間違っています。何のDOM要素がidではありません。この

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

なぜスニペットを作成していませんか？あなたは特にあなたが1つを作っていないと仮定します。 – Rajesh

はここで大幅に少ない痛みを伴う書き換えでそれを作成する方法の例です。 showIdというカスタム属性を使用して、適切なボックスを.val()WorkFlowLevelの選択と照合して表示します。それは多くの項目を追加することが非常に簡単になります。

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

正解ありがとう。その働き者。 1つの問題は、最初のオプション "選択"を選択すると3番目のdivが表示されます。 –

@SunilKumarそれを指摘してくれてありがとう。それを修正した。 :-) – Rajesh

私はこのコードを使用して、現在作業中の 'function WorkflowLevel（obj）{ var selected = $（" option：selected "、obj）.index（）;を使用します。 if（selected == 0） $（ "。Level"）。hide（）; else $（ "。Level"）。hide（）。eq（selected-1）.show（）; } ' –

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

のdiv LevelのClassにオプション
変更IDの値に対応するデータ属性を追加します。 IDは、データがどのように要素が2つのIDを持つことができるオプション選択した値

出典

2017-03-17 07:09:46 guradio

jQueryの選択オプションで表示/非表示にしない理由

答えて

関連する問題