基于选择选项显示/隐藏表列（jQuery）

我希望显示一个表，但仅显示基于选择元素中的选择的特定列

<table>
<thead>
<td colspan="5">
<SELECT name="menu">
        <option value="eur">EUR</option>
        <option value="thb">THB</option>
        <option value="btc">BTC</option>
        <option value="eth">ETH</option>
        <option value="xmr">XMR</option>
        </SELECT>
</td> 
</thead>
<tbody>
    <tr>
       <td>column 1</td>
       <td>column 2</td>
       <td>column 3</td>
       <td>column 4</td>
       <td>column 5</td>
    </tr>
    <tr>
       <td>column 1</td>
       <td>column 2</td>
       <td>column 3</td>
       <td>column 4</td>
       <td>column 5</td>
    </tr>
    </tbody>
</table>

代码只工作一次。但是，在第一次更改选择后，表列不再更新。。。 下面是上面的一些代码：

“否”将被选中

获取所选选项的索引

选择时显示所有td，然后隐藏所选选项的索引

$（document）.on（'change'，'table thead select'，function（）{
var index=$（'option:selected'，this）.index（）；
console.log（索引）
$（'table tbody tr'）。每个（函数（）{
$（this.find（“td”）.show（）；
$（this.find（“td:n子项（“+index+”））.hide（）；
});
});

欧元
泰铢
BTC
以太
XMR
第1栏
第2栏
第3栏
第4栏
第5栏
第1栏
第2栏
第3栏
第4栏
第5栏

“否”将被选中
获取所选选项的索引
选择时显示所有td，然后隐藏所选选项的索引

$（document）.on（'change'，'table thead select'，function（）{
var index=$（'option:selected'，this）.index（）；
console.log（索引）
$（'table tbody tr'）。每个（函数（）{
$（this.find（“td”）.show（）；
$（this.find（“td:n子项（“+index+”））.hide（）；
});
});

欧元
泰铢
BTC
以太
XMR
第1栏
第2栏
第3栏
第4栏
第5栏
第1栏
第2栏
第3栏
第4栏
第5栏
您不需要两个变量，一个用于索引就足够了


$（document）.on（'change'，'table thead select'，function（）{
var index=$（this）.find（“选项：已选”）.index（）；
$（'table tbody td'）.show（）；
$（'table tbody tr'）。每个（函数（）{
$（this.find（“td:eq（“+index+”））.hide（）；
})
});

欧元
泰铢
BTC
以太
XMR
第1栏
第2栏
第3栏
第4栏
第5栏
第1栏
第2栏
第3栏
第4栏
第5栏
您不需要两个变量，一个用于索引就足够了


$（document）.on（'change'，'table thead select'，function（）{
var index=$（this）.find（“选项：已选”）.index（）；
$（'table tbody td'）.show（）；
$（'table tbody tr'）。每个（函数（）{
$（this.find（“td:eq（“+index+”））.hide（）；
})
});

欧元
泰铢
BTC
以太
XMR
第1栏
第2栏
第3栏
第4栏
第5栏
第1栏
第2栏
第3栏
第4栏
第5栏
您需要更改这行代码：

 var index = $(this).parent().index();

该索引当前始终为0。我认为这就是为什么它第一次工作是因为它只能隐藏0一次。您实际获得了select的父级！将其更改为：

 var index = $(this).find("option:selected").index();

您需要更改这行代码：

 var index = $(this).parent().index();

该索引当前始终为0。我认为这就是为什么它第一次工作是因为它只能隐藏0一次。您实际获得了select的父级！将其更改为：

 var index = $(this).find("option:selected").index();