show multiple divs based on dropdown selection

Question

The html file with certain number of divs (different every time) is generated aitomatically. For simplicity:

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

I am wondering about the possibility of dynamically filling a dropdown <select multiple></select> (based on unique block's ids):

And displaying only those divs, which are selected:

plate2 info
plate3 info
plate 2 additional info

Answer 1

Try something like this.

Just loop on all option who are :selected and show div depend of them text() or 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

• Create an object and assign a key to it as id of the element, set its value as true
• If another element having same id is iterated in Array#filter , it is filtered
• Array#map the filtered array and set display as block of the filtered elements
• Also create option elements having selected attribute
• Attach change event over select element
• If value of the option is selected , make div having id as value appear else 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>