DataTables responsive移动端模式下下拉框取值始终为首个选项问题求助

问题根因 #

该问题由DataTables的Responsive响应式扩展导致：

• 桌面端页面宽度足够时，Responsive插件不会修改原表格结构，页面仅存在1个id为states_1的下拉框，取值逻辑正常
• 当页面宽度小于响应式阈值切换到移动端适配模式时，Responsive插件会自动隐藏原表格中放不下的列，同时生成一份重复的DOM结构用于展示折叠的列内容，此时页面上会出现两个id为states_1的下拉框元素
• 你通过id选择器$('#'+id).val()取值时，jQuery默认会返回匹配到的第一个元素的取值，而第一个元素正是原表格中被隐藏、未被操作的下拉框，所以无论你选择哪个选项，永远输出隐藏下拉框的默认值也就是第一个选项的值

解决方法 #

方法1：直接传递当前触发事件的元素（推荐） #

修改内联的onchange事件和对应的处理函数，不需要依赖id选择器取值，直接拿到被操作的元素本身：

1. 把下拉框的onchange属性从onchange="changeState(this.id);"修改为onchange="changeState(this);"
2. 调整changeState函数逻辑：

function changeState(selectEl) {
  console.log($(selectEl).val());
}

方法2：使用事件委托绑定事件 #

删掉内联的onchange属性，统一用jQuery事件委托绑定下拉框变更事件，天然可以拿到当前触发事件的元素：

// 初始化DataTable之后绑定事件
$('#submissions').DataTable();
$('#submissions').on('change', '.form-control', function() {
  console.log($(this).val());
  // 如果需要获取当前行的其他关联数据，也可以通过$(this).closest('tr')查找对应行的列内容
})

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