Bootstrap Selectpicker点击无法隐藏表格列问题求助

我用Bootstrap Selectpicker多选框，希望选中的选项对应表格列隐藏，未选中的列显示，这个功能之前正常，现在失效了。以下是我的HTML和jQuery代码：

HTML代码 #

<select name="column_name" id="column_name" class="form-control selectpicker" multiple>
  <option data-column="0" class="link toggle-vis" value="0">ID</option>
  <option data-column="1" class="link toggle-vis" value="1">Name</option>
  <option data-column="2" class="link toggle-vis" value="2">Code</option>
  <option data-column="3" class="link toggle-vis" value="3">Number</option>
  <option data-column="4" class="link toggle-vis" value="4">Age</option>
  <option data-column="5" class="link toggle-vis" value="5">Sex</option>
  <option data-column="6" class="link toggle-vis" value="6">Occupation</option>
  <option data-column="7" class="link toggle-vis" value="7">Status</option>
  <option data-column="8" class="link toggle-vis" value="8">Country</option>
  <option data-column="9" class="link toggle-vis" value="9">Parish</option>
  <option data-column="10" class="link toggle-vis" value="10">Village</option>
  <option data-column="11" class="link toggle-vis" value="11">District</option>
  <option data-column="12" class="link toggle-vis" value="12">Email</option>
  <option data-column="13" class="link toggle-vis" value="13">Phone</option>
  <option data-column="14" class="link toggle-vis" value="14">Photo</option>
  <option data-column="15" class="link toggle-vis" value="15">Marital</option>
  <option data-column="16" class="link toggle-vis" value="16">Registeredby</option>
  <option data-column="17" class="link toggle-vis" value="17">Lastname</option>
  <option data-column="18" class="link toggle-vis" value="18">Birthdate</option>
  <option data-column="19" class="link toggle-vis" value="19">CreationDate</option>
</select>

原jQuery代码 #

$('#column_name').selectpicker();

$('#column_name').click(function() {
  var all_column = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19];
  var remove_column = $('#column_name').attr('data-column');
  var remaining_column = all_column.filter(function(obj) {
    return remove_column.indexOf(obj) == -1;
  });
  
  dt.columns(remove_column).visible(false);
  dt.columns(remaining_column).visible(true);
});

问题原因及修复方案 #

核心问题点 #

1. 事件绑定错误：直接给原生select绑定click事件无效，因为Bootstrap Selectpicker会替换原生select为自定义DOM结构，点击事件触发时机和对象都不对，应该用插件提供的changed.bs.select事件。
2. 选中列获取错误：$('#column_name').attr('data-column')是获取select元素自身的data-column属性（不存在），而不是选中选项的列索引，正确方式是用$(this).val()获取选中选项的value数组。
3. 逻辑实现复杂且易出错：原代码通过数组过滤处理显示隐藏，容易出现类型不匹配或数组操作错误。

修复后的jQuery代码 #

$('#column_name').selectpicker();

// 使用Bootstrap Selectpicker专属的变更事件
$('#column_name').on('changed.bs.select', function() {
  // 获取所有选中的列索引，转为数字类型（val返回的是字符串数组）
  var hiddenColumns = $(this).val() ? $(this).val().map(Number) : [];
  
  // 遍历所有列，控制显示/隐藏：选中的列隐藏，未选中的显示
  for (let i = 0; i <= 19; i++) {
    dt.columns(i).visible(!hiddenColumns.includes(i));
  }
});

额外检查点 #

• 确保DataTables实例dt已正确初始化，比如：

  // 替换成你的表格ID
  var dt = $('#your-table-id').DataTable();
  

• 确认Bootstrap Selectpicker和DataTables的依赖（jQuery、Bootstrap CSS/JS）已正确加载，版本兼容。

内容的提问来源于stack exchange，提问作者naz