CODEWITHSUNDEEP
javascriptjqueryhtml
Aleksandr Ianevski
Aleksandr Ianevski

Reputation: 1944

show multiple divs based on dropdown selection

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

enter image description here

And displaying only those divs, which are selected:

plate2 info
plate3 info
plate 2 additional info

Upvotes: 1

Views: 2579

Answers (2)

Alexis
Alexis

Reputation: 5831

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>

Upvotes: 1

Rayon
Rayon

Reputation: 36609

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

Upvotes: 1

Related Questions