Question

The javascript code I now have can toggle a single row of data. Whether JQuery or javascript, how do I toggle multiple rows?

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

<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

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:

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