如何选择与下拉列表项的值相等的id

问题描述 投票:0回答:2

我想根据从下拉列表中的选择显示表格的一行。

默认情况下,所有行都将被隐藏。当用户从下拉列表中进行选择时,我希望id等于选择值的行变得可见。

但是我似乎无法成功地将下拉选择值与行ID进行比较。

您能帮忙吗?

<table id = "stats" style="width: 50%;">
            <caption style="caption-side: top; font-weight: bold; font-size:small; padding:20px">Michael Jordan's Stats</caption>
            <tr style="color: red; font-size: large; border: 1px solid black;">
                <th>Year</th>
                <th>G</th>
                <th>PTS</th>
                <th>REB</th>
                <th>AST</th>
            </tr>

            <tr id="84" class=hidden-cell>
                <td>84-85</td>
                <td>82</td>
                <td>28.2</td>
                <td>6.5</td>
                <td>5.9</td>
            </tr>

            </tr>
            <tr id="85" class=hidden-cell>
                <td>85-86</td>
                <td>18</td>
                <td>22.7</td>
                <td>3.6</td>
                <td>2.9</td>
            </tr>
            <tr id="86" class=hidden-cell>
                <td>86-87</td>
                <td>82</td>
                <td>37.1</td>
                <td>5.2</td>
                <td>4.6</td>
            </tr>
</table>*

<select id="year">
            <option value="84">84-85</option>
            <option value="85">85-86</option>
            <option value="86">86-87</option>

</select>

        <button type="button" onclick="select_year()">Select</button>

        <p>Click the button to select season</p>

        <script>

        function select_year()
        {
            var x = document.querySelector('#year').value;

            var table = document.getElementById("stats");
            var trs = table.getElementsByTagName("tr");

            for (var i = 0; i < trs.length; i++)
            {
                var y = trs[i].id
                if (x.intValue() == (trs[i].id).intValue())
                {
                   //Here I want to test with an alert to confirm the compare function is 
                     working but it is not working.
                   alert(x);
                }
            }
        }

        </script>
javascript html
2个回答
0
投票

intValue()不是有效的javascript函数

尝试parseInt(),如下所示

function select_year()
        {
            var x = document.querySelector('#year').value;

            var table = document.getElementById("stats");
            var trs = table.getElementsByTagName("tr");

            for (var i = 0; i < trs.length; i++)
            {
                var y = trs[i].id
                if (parseInt(x) == parseInt(trs[i].id))
                {
                   alert(x);
                }
            }
        }

0
投票
<table id = "stats" style="width: 50%;">
   <caption style="caption-side: top; font-weight: bold; font-size:small; padding:20px">Michael Jordan's Stats</caption>
   <tr style="color: red; font-size: large; border: 1px solid black;">
      <th>Year</th>
      <th>G</th>
      <th>PTS</th>
      <th>REB</th>
      <th>AST</th>
   </tr>
   <tr id="84" class=hidden-cell>
      <td>84-85</td>
      <td>82</td>
      <td>28.2</td>
      <td>6.5</td>
      <td>5.9</td>
   </tr>
   </tr>
   <tr id="85" class=hidden-cell>
      <td>85-86</td>
      <td>18</td>
      <td>22.7</td>
      <td>3.6</td>
      <td>2.9</td>
   </tr>
   <tr id="86" class=hidden-cell>
      <td>86-87</td>
      <td>82</td>
      <td>37.1</td>
      <td>5.2</td>
      <td>4.6</td>
   </tr>
</table>
<select id="year">
   <option value="84">84-85</option>
   <option value="85">85-86</option>
   <option value="86">86-87</option>
</select>
<p>Click the button to select season</p>
<script>
   function select_year(){
       var x = document.querySelector('#year').value;

       var table = document.getElementById("stats");
       var trs = table.getElementsByTagName("tr");

       for (var i = 0; i < trs.length; i++)
       {
           var y = trs[i].id

           if (+x === +trs[i].id)
           {
              //Here I want to test with an alert to confirm the compare function is 
               //working but it is not working.
              alert(x);
           }
       }
   }

</script>
<button type="button" onclick="select_year()">Select</button>

© www.soinside.com 2019 - 2024. All rights reserved.