表示要素など

Question

を隠し、私は選択に基づいて/隠し要素を示すために、いくつかのソリューションを見てきましたが、私は、私はすべてのdivをするまで表示する必要がより効率的

何かが必要だと思います選択入力が変更されます。変更すると、一致するIDを持つ要素だけが表示され、他のドロップダウンと一致しない限り、他のすべての要素は隠されます（潜在的に3つの入力）

「this.value」を使用していますが、ここでのコードのために泣いて人のために表示機能

と組み合わせることはドロップダウンで、すべてのデフォルトとして表示されますが、として隠され、ここで

<select name="dataSelect" id="dataSelect" class="enter-drop" required> 
<option value="" disabled>Data Amount</option> 
<option value="any" selected>Any</option> 
<option value="30">30GB</option> 
<option value="12">12GB</option> 
<option value="8">8GB</option> 
</select> 

<div id="30" class="deal">30GB of Data</div> 
<div id="12" class="deal">12GB of Data</div> 
<div id="8" class="deal">8GB of Data</div> 

Answer 1

ピュアJavaScriptの

$(function() { 
 
    $('#selector').on('input', function() { 
 
     var comp = $(this).val() 
 
    $('div').each(function(i, el) { 
 
     if (el.id == comp){ 
 
     $(el).show() 
 
     } else { 
 
     $(el).hide() 
 
     } 
 
    }) 
 
    }) 
 
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<select id="selector"> 
 
    <option>a</option> 
 
    <option>b</option> 
 
    <option>c</option> 
 
    <option>d</option> 
 
</select> 
 

 
<div id="a">A</div> 
 
<div id="b">B</div> 
 
<div id="c">C</div> 
 
<div id="d">D</div>

。 div要素ごとにIDを使用する必要はありません。より良い使用 data属性。

document.getElementById('dataSelect').addEventListener('change', function() { 
 
    var nodes = document.querySelectorAll("div[data-amount]"); 
 
    var selected = this.options[this.selectedIndex]; 
 
    if (selected.value == "any") { 
 
    for (var i = 0; i < nodes.length; i++) { 
 
     nodes[i].style.display = 'block'; 
 
    } 
 
    } else { 
 
    for (var i = 0; i < nodes.length; i++) { 
 
     nodes[i].style.display = (nodes[i].dataset.amount == selected.value) ? 'block' : 'none'; 
 
    } 
 
    } 
 

 
});

<select name="dataSelect" id="dataSelect" class="enter-drop" required> 
 
<option value="" disabled>Data Amount</option> 
 
<option value="any" selected>Any</option> 
 
<option value="30">30GB</option> 
 
<option value="12">12GB</option> 
 
<option value="8">8GB</option> 
 
</select> 
 

 
<div data-amount="30" class="deal">30GB of Data</div> 
 
<div data-amount="12" class="deal">12GB of Data</div> 
 
<div data-amount="8" class="deal">8GB of Data</div>

Answer 2

を選択していない時にする必要があり、対応する要素は、可能な解決策であります少なくとも私があなたが意味すると思う最小限の例があります。

Answer 3

<sacript> 
$('select[name=mySel]').change(function(){ 
    $('div').css('display','none'); 
    var id = $(this).val(); 
    $('div[id='+id+']').css('display','block'); 
}) 
</sacript> 
<select name="mySel"> 
    <option value="myID1">myID1</option> 
    <option value="myID2">myID2</option> 
    <option value="myID3">myID3</option> 
    <option value="myID4">myID4</option> 
    <option value="myID5">myID5</option> 
</select> 

<div id="myID1">content1</div> 
<div id="myID2">content2</div> 
<div id="myID3">content3</div> 
<div id="myID4">content4</div> 
<div id="myID5">content5</div>