如何选中过滤后的HTML select下拉框的第一个选项

核心原因 #

你通过toggle()仅修改了option的显示隐藏状态，option在DOM树中的原始排序没有变化。原生selectedIndex属性按照DOM节点的原始下标计数，不会自动跳过隐藏的option，因此直接设置selectedIndex=0永远选中原始列表的第一个option，与该option是否可见无关。

修复后的完整JS代码 #

$(document).ready(function(){
  $("#myInput").on("keyup", function() {
    var value = $(this).val().toLowerCase();
    // 执行option筛选
    $("#asortyment option").filter(function() {
      $(this).toggle($(this).text().toLowerCase().indexOf(value) > -1);
    });
    // 获取所有可见option的第一个，设置为选中
    const firstMatch = $("#asortyment option:visible").first();
    if (firstMatch.length) {
      firstMatch.prop('selected', true);
    } else {
      // 无匹配结果时清空选中状态
      $("#asortyment").prop('selectedIndex', -1);
    }
  });
});

逻辑说明 #

• 筛选完成后使用jQuery的:visible选择器匹配所有处于显示状态的option节点
• 调用first()取匹配结果的第一个节点，直接设置其selected属性为true，即可选中过滤后的第一个匹配项
• 补充无匹配结果时清空选中的兼容逻辑，可根据实际需求调整

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