JavaScript match selected text with div id

Question

I am trying to show and hide certain div based on selected text in drop down list. The option in drop-down list is generated by getting id from certain class name. I thought of using looping of an array in javascript but am unsure how to do so. Sorry that i may sound unclear of what i wanted to do as i am lost and unsure how to do them.

My Codes:

JavaScript:

var elements = document.body.getElementsByClassName("headline-bar");

window.onload = function() {

    var year = document.getElementById("year");
    for (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 that i thought of using:

var selectedText = yearSelect.options[yearSelect.selectedIndex].text;
var classList = document.getElementByClassName('press_release_holder').id.split(/\s+/);
for (var i = 0; i < classList.length; i++) {
    if (classList[i] === 'selectedText') {
        //do something
    }
}

based on the selected text from drop down list. example if user click on 2015 in drop down list, only id= 2015 show , others hidden — lel, Apr 25 '16 at 05:27

score 0 · Answer 1 · edited May 23 '17 at 11:59

0

You can use the onchange event in your drop down to fire your code:

<select onchange="myFunction()">

http://www.w3schools.com/jsref/event_onchange.asp

Then once myFunction() is fired, you get the selected text and set the CSS manually, as with this answer:

https://stackoverflow.com/a/21070237/5882767

edited May 23 '17 at 11:59

Community

1
1

answered Apr 25 '16 at 05:11

zerohero

593
4
15

score 0 · Answer 2 · answered Apr 25 '16 at 05:15

0

use this on change function

 <select onchange="myChangeFunction()">

function myChangeFunction(){
if(  $('#year').val() == 'yourSelectedOption'){
$('.className').hide();    // use javascript function for hide show of element
   }
}

answered Apr 25 '16 at 05:15

Rajdeep

788
7
26

1

You are using jquery. It is nowhere mentioned in question or answer. – niyasc Apr 25 '16 at 05:16

score 0 · Answer 3 · answered Apr 25 '16 at 05:20

0

Do the values of the dropdown list correspond to the year? i.e. the id of the div tag you want to hide.

If so, you can try the following:

var optionList = document.getElementById("year");
var selectedText = optionList.options[optionList .selectedIndex].value;

//hide the div with the id = selectedText
document.getElementById(selectedText).style.display = 'none';

answered Apr 25 '16 at 05:20

Brian Min

265
4
10

Yes it correspond, it works thank you! but how do i hide other div which are not selected? – lel Apr 25 '16 at 05:36

Rayon · Accepted Answer · 2016-04-25T05:52:13.713

Easier solution would to use querySelectorAll considering the condition of All option.

Use change listener for select-input.

var elements = document.body.getElementsByClassName("headline-bar");
var year = document.getElementById("year");
for (i = 0; i < 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>

JavaScript match selected text with div id

4 Answers4

Fiddle Demo