时间戳

首页 > 解决方案 > 仅显示表中选定的行，其他行将在同一时间使用 Javascript 隐藏

javascript - 仅显示表中选定的行，其他行将在同一时间使用 Javascript 隐藏

问题描述

这是一个房间类型的选择。在这里，我想在此选择中选择房间类型，我只想显示我从下拉列表中选择的那一行，而其他行应该同时隐藏。

<select onChange="onSelect(this)" class="col-Room" name="ACRoom">
  <option value="optionAC" >AC-Room</option>
  <option value="optionNAC">Non AC-Room</option>
</select>

这是我用于选择的 javascript 代码。但它不能正常工作。只有第二个选项适用于选择，第一个选项在选择时无法正常工作。

请帮帮我。

<script>     

function onSelect(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('optionAC');
  hideRow('optionNAC');
}

</script>

标签： javascript

解决方案

您应该在显示某些特定行的同时隐藏其他行。选择第一个选项时，您不会隐藏 nonac 行。另外我建议您使用类名而不是 ID，因为表可以有多个 ac/non-ac 行。下面的代码可以帮助你。

<!DOCTYPE html>


<table id="table">
    <thead>
        <tr>
            <th>Rooms</th>
        </tr>
    </thead>
    <tbody>
        <tr class="ac">
            <td>AC room</td>
        </tr>
        <tr class="nonac">
            <td>Non Ac room</td>
        </tr>
        <tr class="ac">
            <td>AC room</td>
        </tr>
        <tr class="nonac">
            <td>Non Ac room</td>
        </tr>
    </tbody>
</table>

<select onChange="onSelect(this)">
    <option value="ac">AC</option>
    <option value="nonac">NON AC</option>
</select>

<script>
    var ac = document.getElementsByClassName("ac");
    var nonac = document.getElementsByClassName("nonac");

    function onSelect(thisselect) {
        var selected = thisselect.options[thisselect.selectedIndex].value;
        toggleRow(selected);

    }

    function toggleRow(id) {

        if (id == "ac") {
            showac();
        } else {
            shownonac();
        }

    }

    function showac() {

        for (var i = 0; i < nonac.length; i += 1) {
            nonac[i].style.display = 'none';
        }

        for (var i = 0; i < ac.length; i += 1) {
            ac[i].style.display = 'block';
        }
    }

    function shownonac() {

        for (var i = 0; i < ac.length; i += 1) {
            ac[i].style.display = 'none';
        }

        for (var i = 0; i < nonac.length; i += 1) {
            nonac[i].style.display = 'block';
        }
    }
</script>

推荐阅读