如何在按钮点击时迭代获取多个TomSelect下拉列表的选中值

错误原因 #

• 你在按钮点击回调中重复绑定select的change事件属于逻辑错误：change事件仅在下拉选项变更时触发，提交时直接读取所有下拉列表的当前选中值即可，不需要额外绑定事件
• 重复IDmenuItems不符合HTML规范，建议后续改为class属性

正确实现代码 #

你可以直接用以下代码替换你的按钮点击逻辑，运行后会在控制台输出所有下拉列表的ID对应选中值的集合：

$('#btner').click(function() {
  // 存储所有下拉的选中值，key为下拉ID，value为选中项数组
  const allSelectValues = {}
  $('#container > .d-flex > select').each(function() {
    const selectId = $(this).attr('id')
    // 直接读取当前下拉的选中值，TomSelect兼容原生select的val()方法
    allSelectValues[selectId] = $(this).val() || []
  })
  // 输出结果，可根据需求后续处理
  console.log(allSelectValues)
})

如果需要更稳妥的从TomSelect实例直接取值的写法，可以参考如下代码，前提是你初始化TomSelect的时候把实例存下来：

// 初始化时存储所有TomSelect实例
const selectInstances = {}
;['drop1', 'drop2', 'drop3'].forEach(id => {
  selectInstances[id] = new TomSelect(`#${id}`, {
    sortField: 'text',
    hideSelected: false,
    duplicates: true,
    plugins: ['input_autogrow'],
  })
})

// 提交时读取
$('#btner').click(function() {
  const allSelectValues = {}
  Object.keys(selectInstances).forEach(id => {
    allSelectValues[id] = selectInstances[id].getValue()
  })
  console.log(allSelectValues)
})

运行效果示例 #

比如你在drop1选了Item1、Item2，drop2选了Item4，drop3没选，输出结果为：

{
  drop1: ["Item1", "Item2"],
  drop2: ["Item4"],
  drop3: []
}

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