如何获取Bootstrap Multiselect控件中选中项的索引

嘿，这个需求其实很好实现，给你两种靠谱的方案，根据你的场景选就行：

方案一：用Bootstrap Multiselect内置方法（推荐） #

Bootstrap Multiselect本身提供了getSelected方法，能直接拿到选中的<option>元素集合，我们只需要从中提取每个元素的索引就可以了：

// 获取选中的option元素（jQuery对象集合）
const selectedOptions = $('#multiselectElement').multiselect('getSelected');

// 遍历提取每个option的索引，转成普通数组
const selectedIndices = selectedOptions.map(function() {
  return $(this).index();
}).get();

// 输出结果就是你想要的索引数组，比如 [0, 2, 5]
console.log(selectedIndices);

为啥推荐这个？ #

因为它直接对应选中的DOM元素，就算你的选项里有重复的值，也能精准拿到选中项的真实索引，不会出错。

方案二：手动遍历匹配（兼容场景） #

如果不想依赖插件的内置方法，也可以手动遍历所有选项，通过对比选中值来获取索引：

// 获取下拉框的所有选项
const allOptions = $('#multiselectElement option');
// 获取当前选中的值数组（处理val()返回null的情况）
const selectedValues = $('#multiselectElement').val() || [];

const selectedIndices = [];
// 遍历每个选项，匹配选中值并收集索引
allOptions.each(function(index) {
  if (selectedValues.includes($(this).val())) {
    selectedIndices.push(index);
  }
});

console.log(selectedIndices);

注意事项 #

如果你的下拉选项存在重复值，这种方法可能会把所有匹配值的索引都收集进来，这时候方案一的准确性会更高。

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