[英]How can I toggle the display for multiple rows using a ddl onchange()? (JQuery or javascript)
The javascript code I now have can toggle a single row of data. 我现在拥有的javascript代码可以切换一行数据。 Whether JQuery or javascript, how do I toggle multiple rows? 无论是JQuery还是javascript,如何切换多行?
In this example, when location 1 (value = "1") is selected, I would like to have tr tags "11", "12", "13" displayed (Location "1" Building "1" => "11")and Location 2 displays tr "21", "22". 在此示例中,当选择位置1(值=“ 1”)时,我希望显示tr标签“ 11”,“ 12”,“ 13”(位置“ 1”建筑物“ 1” =>“ 11” ),位置2显示tr“ 21”,“ 22”。
<script type="text/javascript" language="javascript">
function propertySelected() {
var Select = document.getElementById('Select');
var Table = document.getElementsByName('List')[0];
var strSelect = Select.options[Select.selectedIndex].value;
var rows = Table.getElementsByTagName("tr");
var rowSelect = document.getElementById(strSelect);
for (var i = 0; i < rows.length; i++) {
rows[i].style.display = 'none';
}
rowSelect.style.display = '';
}
</script>
... ...
<select id="Select" onchange="Selected()">
<option value="1">Location 1</option>
<option value="2">Location 2</option>
<option value="3">Location 3</option>
</select>
... ...
<table>
<tr id="11"><td>Location 1 Build 1</td></tr>
<tr id="12"><td>Location 1 Build 2</td></tr>
<tr id="13"><><td>Location 1 Build 3</td></tr>
<tr id="21" style="display:'none';"><><td>Location 2 Build 1</td></tr>
<tr id="22" style="display:'none';"><><td>Location 2 Build 2</td></tr>
<tr id="31" style="display:'none';"><><td>Location 3 Build 1</td></tr>
</table>
Instead of hiding all rows and then showing one row, put some logic in the loop so that you hide or show each row depending on the id: 而不是隐藏所有行然后显示一行,而是将一些逻辑放入循环中,以便根据id隐藏或显示每一行:
<script type="text/javascript">
function propertySelected() {
var Select = document.getElementById('Select');
var Table = document.getElementsByName('List')[0];
var strSelect = Select.options[Select.selectedIndex].value;
var rows = Table.rows;
var rowSelect = document.getElementById(strSelect);
for (var i = 0; i < rows.length; i++) {
var row = rows[i];
row.style.display = (row.id.substr(0,1) == strSelect) ? '' : 'none';
}
}
</script>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.