显示元素与ID匹配选择值，并隐藏其他

-5

我已经看到了一些解决方案，用于显示基于选择/隐藏元素，但我想我需要的东西，更高效的显示元素与ID匹配选择值，并隐藏其他

我需要显示，直到所有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>

来源

2017-04-19 Frsti

代码，代码和一次，代码！我们需要示例代码，告诉我们您做了什么以及您遇到问题的位置。 – Oen44

@ Oen44你又忘了你的魔杖吗？在回答SO问题时，我多久必须告诉你带它？ ;-) – Christoph

你使用jQuery吗？你也可以发布一个片段，展示你有什么和你想要达到的目标吗？ –

纯JavaScript。没有必要为每个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>

来源

2017-04-19 19:28:12 Oen44

谢谢，这个作品完美 – Frsti

-1

在这里，相应的元件相结合，这是一个可能的解决方案，或者至少可能是我认为你的意思的最低限度的例子。

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

来源

2017-04-19 16:27:31

虽然片段在原地工作，但我刚刚尝试实施它，但它似乎将所有元素设置为隐藏在整个页面上，而不是从下拉列表中选择的元素。 – Frsti

你在哪里看到'jQuery'标签？ OP没有要求jQuery，而是JavaScript。 – Oen44

-1

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

来源

2017-04-19 16:29:14

没有'jQuery'标签，OP没有说他想使用'jQuery'。 – Oen44

显示元素与ID匹配选择值，并隐藏其他

回答

相关问题