基于下拉选择的jquery隐藏表中的列

Question

我有一张六栏的桌子。它有一个下拉菜单，这样观众就可以选择最右边的四列中的一列(这四列的“第四列”是choiceA、choiceB、choiceC、choiceD)。我只希望显示所选的列；其他三列将被隐藏。这两列最左边的列总是可见的。

也就是说，观众总共只会看到三列(当然还有下拉框)。如果她从下拉列表中选择“选项A，lbs”，其想法是显示整个choiceA列并隐藏所有其他列。

我认为这将是一个简单的父母/子女问题，但事实证明，这绝不是简单的事情。我尝试将下拉选项映射到列头以供选择。

这是我的jquery代码(请记住，我是个初学者)：

 $(document).ready(function () {
    $('#ddselect').change(function () {
       var id = $(this).children(':selected').attr('id');
       $('#' + id + '-sel').show().siblings('th.substance').hide();
       $('.' + id + '-substance').show().not($('.' + id + '-substance')).hide();
    });
 });

这是HTML：

<table>
<tr>
    <th scope="col" align="left"></th>
    <th scope="col"></th>
    <th colspan="4" scope="col">
        <select id='ddselect'>
            <option class='ddselect' id="ChoiceA">ChoiceA, lbs</option>
            <option class='ddselect' id="ChoiceB">ChoiceB, oz</option>
            <option class='ddselect' id="ChoiceC">ChoiceC, oz</option>
            <option class='ddselect' id="ChoiceD">ChoiceD, oz</option>
        </select>
</tr>
<tr>
    <th scope="col" align="left">Module</th>
    <th scope="col" align="left">Units</th>
    <th class='substance' id='ChoiceA-sel' scope="col">ChoiceA</th>
    <th class='substance' id='ChoiceB-sel' scope="col">ChoiceB</th>
    <th class='substance' id='ChoiceC-sel' scope="col">ChoiceC</th>
    <th class='substance' id='ChoiceD-sel' scope="col">ChoiceD</th>
</tr>
<tr>
    <td>type1</th>
        <td>5,000</td>
        <td class='ChoiceA-substance'>0</td>
        <td class='ChoiceB-substance'>0</td>
        <td class='ChoiceC-substance'>0</td>
        <td class='ChoiceD-substance'>0</td>
</tr>
<tr>
    <td>type2</th>
        <td>545</td>
        <td class='ChoiceA-substance'>288</td>
        <td class='ChoiceB-substance'>8</td>
        <td class='ChoiceC-substance'>9</td>
        <td class='ChoiceD-substance'>0.2</td>
</tr>
<tr>
    <td>type3</th>
        <td>29</td>
        <td class='ChoiceA-substance'>15</td>
        <td class='ChoiceB-substance'>89</td>
        <td class='ChoiceC-substance'>43</td>
        <td class='ChoiceD-substance'>9.9</td>
</tr>
</tr>

​

我可以用下拉列表显示正确的列头，并隐藏其他列头，但不能隐藏对应于隐藏头部的“td”。(我会发布一个堆栈片段，但该按钮没有出现在我的编辑器中。)

有什么想法吗？

Answer 1

让我们把它分解成一个小的例子。在处理尚未完全掌握的概念时，最好不要过于复杂您的代码。

实现目标的一个好方法是使用公共类，并跨类来选择和选择正确的列。

这样，代码就变得更加清晰了：

http://jsbin.com/megicegupa/1/edit?html,js,output

​

$('#sel').on('change', function () {
  var val = $(this).val(),
      target = '.' + val;
  
  $('.choice').hide();
  $(target).show();
});

  <select id="sel">
    <option value="one">1</option>
    <option value="two">2</option>
  </select>
  
  <table>
    <tr>
      <th>Module</th>
      <th>Units</th>
      <th class="choice one">Choice One</th>
      <th class="choice two">Choice Two</th>
    </tr>
    
    <tr>
      <td>type1</td>
      <td>5000</td>
      <td class="choice one">100</td>
      <td class="choice two">200</td>
    </tr>
    
    <tr>
      <td>type2</td>
      <td>350</td>
      <td class="choice one">40</td>
      <td class="choice two">90</td>
    </tr>
  </table>


<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

​

附带注意:您有一些<td>标记，后面跟着</th>标记。确保验证您的HTML错误。

Answer 2

根据您的代码加载页面时，我们可以看到两个列名“选择一”和“选择二”。所以最好在页面加载时隐藏列名。

$('#sel').on('change', function() {
  var val = $(this).val(),
    target = '.' + val;
  $('.choice').hide();
  $(target).show();
});

/*Add below code for showing column name accordingly to select box change 
 */

$('.choice').hide();
if ($('#sel').val() == 'one') {
  $('.one').show()
} else {
  $('.two').show()
}