Как переключить отображение для нескольких строк с помощью ddl onchange ()? (JQuery или JavaScript)

Question

Код JavaScript, который у меня теперь есть, может переключать одну строку данных. Будь то JQuery или Javascript, как мне переключать несколько строк?

В этом примере, когда выбрано местоположение 1 (значение = "1"), я бы хотел отображать теги tr "11", "12", "13" (Местоположение "1" Здание "1" => «11»), а в положении 2 отображается «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

Вместо того, чтобы скрывать все строки и затем показывать одну строку, поместите некоторую логику в цикл, чтобы скрыть или показать каждую строку в зависимости от идентификатора:

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