html - JavaScript match selected text with div id -

i trying show , hide div based on selected text in drop down list. option in drop-down list generated getting id class name. thought of using looping of array in javascript unsure how so. sorry may sound unclear of wanted lost , unsure how them.

my codes:

javascript:

var elements = document.body.getelementsbyclassname("headline-bar");  window.onload = function() {      var year = document.getelementbyid("year");     (i=0;i<elements.length;i++)     {         var entry = document.createelement("option");         entry.text = elements[i].textcontent;         year.add(entry ,null);     } } 

html:

<form> <select id="year"> <option>all</option> </select> <input type="submit" value="submit"> </form>   <form action="#" id="release_year" method="post" >   <div class="release_holder" id="2015" style="margin-bottom: 20px">  <div class="headline-bar">2015</div>  <div class="content">hello there</div> </div>  <div class="release_holder" id="2014" style="margin-bottom: 20px">  <div class="headline-bar">2014</div>  <div class="content">hello there</div> </div>  </form> 

javascript loop array thought of using:

var selectedtext = yearselect.options[yearselect.selectedindex].text; var classlist = document.getelementbyclassname('press_release_holder').id.split(/\s+/); (var = 0; < classlist.length; i++) {     if (classlist[i] === 'selectedtext') {         //do     } } 

easier solution use queryselectorall considering condition of all option.

use change listener select-input.

---

var elements = document.body.getelementsbyclassname("headline-bar");  var year = document.getelementbyid("year");  (i = 0; < elements.length; i++) {    var entry = document.createelement("option");    entry.text = elements[i].textcontent;    year.add(entry, null);  }    function showhide(elem) {    var val = elem.value;    if (val == 'all') {      [].foreach.call(document.queryselectorall('.release_holder'), function(el) {        el.style.display = 'block';      });    } else {      [].foreach.call(document.queryselectorall('.release_holder'), function(el) {        el.style.display = 'none';      });      document.queryselector('[id="' + val + '"]').style.display = '';    }  }

<form>    <select id="year" onchange='showhide(this)'>      <option>all</option>    </select>    <input type="submit" value="submit">  </form>  <form action="#" id="release_year" method="post">    <div class="release_holder" id="2015" style="margin-bottom: 20px">      <div class="headline-bar">2015</div>      <div class="content">hello there</div>    </div>    <div class="release_holder" id="2014" style="margin-bottom: 20px">      <div class="headline-bar">2014</div>      <div class="content">hello there</div>    </div>  </form>

fiddle demo