已过滤select下拉框修改selectedIndex时遍历未过滤选项问题

问题原因 #

原生DOM的selectedIndex属性会统计<select>下全部<option>元素，不会区分你通过toggle()隐藏的过滤项和显示的有效项，因此跳转时会把已过滤的隐藏选项也计入计数。

修复方案 #

直接改写wiecej函数，基于当前可见的过滤后选项计算跳转位置即可：

function wiecej(){
  // 筛选出当前过滤后可见的所有选项
  const visibleOptions = $("#asortyment option:visible");
  // 查找当前选中项在可见选项列表中的索引
  const currentIndex = visibleOptions.index($("#asortyment option:selected"));
  // 计算下一个选项的索引，这里如果到最后一项会自动跳回第一项，不需要循环可自行修改边界逻辑
  const nextIndex = currentIndex + 1 < visibleOptions.length ? currentIndex + 1 : 0;
  // 选中下一个可见选项
  visibleOptions.eq(nextIndex).prop("selected", true);
  // 触发原有change事件
  $("#asortyment").trigger("change");
}

如果不需要循环跳转，到最后一个选项就停止，把nextIndex的计算逻辑替换为：

const nextIndex = Math.min(currentIndex + 1, visibleOptions.length - 1);

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