带optgroup标签的多选下拉框无法获取选中option值问题

问题原因 #

你代码出错的核心是option元素的父节点不是固定为select：添加optgroup标签后，option的直接父节点是<optgroup>元素，而非外层的<select>，所以this.parentNode拿到的是optgroup对象，它没有options属性，自然遍历失败。

修正方案 #

直接定位到option所属的外层select元素即可，不用通过parentNode递归查找，两种实现方式都可以：

原生JS写法修正

$('#mydropdown option').click(function(evt) {
  var selectedOption = evt.target;
  // 直接查找最近的外层select元素，兼容有无optgroup的场景
  var dropdown = this.closest('select');
  queue.add(selectedOption.value);
  Array.from(dropdown.options).forEach(function(option) {
    if (!option.selected) {
      queue.remove(option.value);
    }
  });
});

更精简的jQuery实现（推荐）

既然已经引入了jQuery，直接用内置方法获取选中值更简单，不需要自己遍历options：

// 直接监听select的change事件，比监听option的click兼容性更好，覆盖键盘操作选中的场景
$('#mydropdown').on('change', function() {
  // 多选模式下会直接返回所有选中项的value组成的数组，自动兼容带optgroup的结构
  const selectedValues = $(this).val();
  // 同步更新queue即可
  queue.clear();
  selectedValues.forEach(val => queue.add(val));
});

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