Question

我来到这里是因为我不知道如何解决这个问题，而且我已经没时间了，所以我对html，css，php和其他语言有了解，但我是javascript的新手。我想知道如何使用select和option标签制作组合框。问题是我想要隐藏和显示一些“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我的意思是我需要隐藏所有“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。

Answer 2

您需要为getElementById

指定一个ID

<tr id="2012"><td>2012</td></tr>

Answer 3

您可以使用：document.querySelector（）
隐藏全部：
document.querySelector('tr');

用于按类名隐藏：
document.querySelector('.className');

Select Option类中的JavaScript

3 个答案: