Select Option 类中的 JavaScript

Question

我来到这里是因为我不知道如何解决这个问题，而且我已经没有时间了，所以我有 html、css、php 和其他语言的知识，但我是 javascript 的新手。我想知道如何使用选择和选项标签制作组合框。问题是我想隐藏和显示一些“tr”项目并完成我需要使用类或标签函数而不是 id 的情况。例如代码是:

    <script>

function toggleOption(thisselect) {
var selected = thisselect.options[thisselect.selectedIndex].value;
toggleRow(selected);
}

function toggleRow(id) {
var row = document.getElementById(id);
if (row.style.display == '') {
row.style.display = 'none';
}
else {
row.style.display = '';
}
}

function showRow(id) {
var row = document.getElementById(id);
row.style.display = '';
}

function hideRow(id) {
var row = document.getElementById(id);
row.style.display = 'none';
}

function hideAll() {
hideRow('2014');
hideRow('2013');
hideRow('2012');
hideRow('2011');
}

</script>

我的 HTML 是这样的。

<tr class="2014">texto1</tr>
<tr class="2014">texto2</tr>
<tr class="2014">texto3</tr>
<tr class="2013">texto1</tr>
<tr class="2013">texto2</tr>
<tr class="2013">texto3</tr>
<tr class="2012">texto1</tr>
<tr class="2012">texto2</tr>
<tr class="2012">texto3</tr>

<select id="options">
<option value="2014">2014</option>
<option value="2013">2013</option>
<option value="2012">2012</option>
</select>

它适用于上面的代码，但它只隐藏和 id 我的意思是一个 tr 我需要隐藏所有“2014 tr”:

希望你能明白我的意思。我将不胜感激任何建议。

我在 tr 中使用了多个类，因此我只需要显示年份。

Answer 1

在你的html中你使用了class

<tr class="2014">texto1</tr>像这样。在这种情况下更改您的脚本

document.getElementById();至document.getElementsByClassName();

因此，根据您的代码，我认为您想要 hide tr's ，所以document.getElementsByClassName();给出out put如array 。所以loop the elements并制作 css class what you want .