如何使用ddl onchange（）切换多行的显示？ （JQuery或javascript）

Question

我现在拥有的javascript代码可以切换单行数据。无论是JQuery还是javascript，如何切换多行？

在这个例子中，当选择位置1（值=“1”）时，我想显示tr标签“11”，“12”，“13”（位置“1”建筑物“1”=＆gt; ;“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>

Answer 1

不是隐藏所有行然后显示一行，而是在循环中放入一些逻辑，以便根据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>