Question

我正在尝试根据下拉列表中的选定文本显示和隐藏某个div。下拉列表中的选项是通过从某个类名获取id来生成的。我想在javascript中使用数组的循环，但我不确定如何这样做。对不起，我可能听不清楚我想做什么，因为我迷路了，不知道该怎么办。

我的代码：

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循环数组：

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

Answer 1

您可以在下拉列表中使用onchange事件来触发代码：

<select onchange="myFunction()">

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

然后一旦myFunction（）被触发，您将获得所选文本并手动设置CSS，如下所示：

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

Answer 2

在更改功能上使用此功能

 <select onchange="myChangeFunction()">

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

Answer 3

下拉列表的值是否与年份相对应？即你要隐藏的div标签的id。

如果是这样，您可以尝试以下方法：

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

Answer 4

考虑到querySelectorAll选项的条件，更容易使用All。

使用change的{{1}}侦听器。

＆＃13;

select-input

＆＃13;

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 = '';
  }
}

＆＃13;

JavaScript将所选文本与div id匹配

4 个答案:

Fiddle Demo