根据下拉选择显示多个div

Question

具有一定数量的div（每次都不同）的html文件是通过原子方式生成的。 为简单起见：

<div id="plate1">
  <p>plate 1 info</p>
</div>
<div id="plate2">
  <p>plate 2 info</p>
</div>
<div id="plate3">
  <p>plate 3 info</p>
</div>
<div id="plate2">
  <p>plate 2 additional info</p>
</div>

我想知道是否可以动态填充下拉列表<select multiple></select> （基于唯一块的ID）：

并仅显示已选择的那些div：

plate2 info
plate3 info
plate 2 additional info

Answer 1

尝试这样的事情。

只需循环选择:selected所有选项，然后显示div取决于它们text()或val()

 $("#myselect option").prop("selected",true); $("#myselect").change(function(){ $(".mydiv").hide(); $("#myselect option:selected").each(function(){ $("#mydiv"+$(this).val()).show(); }); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <select multiple id="myselect"> <option value="1">div1</option> <option value="2">div2</option> <option value="3">div3</option> <option value="4">div4</option> </select> <div class="mydiv" id="mydiv1">First div</div> <div class="mydiv" id="mydiv2">Second div</div> <div class="mydiv" id="mydiv3">third div</div> <div class="mydiv" id="mydiv4">Fourth div</div> 

Answer 2

• 创建一个对象并为其分配一个键作为元素的id ，将其值设置为true
• 如果另一个具有相同id元素在Array#filter迭代，则将其过滤
• Array#map过滤后的数组并将display设置为过滤后的元素的block
• 还创建具有selected属性的option元素
• 在select元素上附加change事件
• 如果selected了option值，则使id为value div出现，否则display : none

 var select = document.getElementById('select'); var elems = document.querySelectorAll('.plate'); var obj = {}; var filtered = [].filter.call(elems, function(el) { if (!obj[el.id]) { obj[el.id] = true; return true; } else { return false; } }); var selectOpt = filtered.map(function(el) { el.style.display = 'block'; return '<option selected>' + el.id + '</option>'; }); select.innerHTML = selectOpt.join(''); select.addEventListener('change', function() { for (var i = 0, iLen = select.options.length; i < iLen; i++) { var opt = select.options[i]; var val = opt.value || opt.text; if (opt.selected) { document.getElementById(val).style.display = 'block'; } else { document.getElementById(val).style.display = 'none'; } } }); 

 div { display: none; } 

 <div id="plate1" class="plate"> <p>plate 1 info</p> </div> <div id="plate2" class="plate"> <p>plate 2 info</p> </div> <div id="plate3" class="plate"> <p>plate 3 info</p> </div> <div id="plate2" class="plate"> <p>plate 2 additional info</p> </div> <select multiple id='select'></select>