如何让search类select菜单失焦时重置？前端技术求助

嘿，我完全get到你的需求了——你希望所有带有.search类的下拉菜单在失去焦点时自动回到第一个默认选项，这样切换回来的时候就不会停留在之前选中的状态，对吧？你想到用.focusout()的思路完全正确，咱们来把这个功能加上！

问题分析 #

现在的问题是，当你在同一choice下切换不同的search菜单后，返回原来的菜单时，它还保留着之前选中的选项，导致你必须先选别的选项才能再次选它。我们需要给每个.search里的下拉菜单加上失去焦点的监听，自动重置选项。

修改后的代码实现 #

在你现有的jQuery代码里，添加一段.focusout()的事件处理逻辑就行：

$(document).ready(function () {
    $('.panel').hide();
    $('.search').hide();
    $('#start').show();

    $('.window').change(function () {
        $('.panel').hide();
        $('#'+$(this).val()).show();
    })

    $('.choice').change(function () {
        $('.search').hide();
        $('#'+$(this).val()).show().find('option:first-child').attr({ selected : true, disabled : true }).trigger("change");
    })

    // 新增：监听search类下拉菜单失去焦点，重置为第一个选项
    $('.search .window').focusout(function() {
        // 使用prop()来设置选中状态，比attr()更适合布尔属性
        $(this).find('option:first-child').prop('selected', true);
        // 可选：如果需要触发change事件来同步面板状态（比如隐藏之前的面板），就解开下面的注释
        // $(this).trigger('change');
    });
});

关键细节说明 #

• 为什么用prop()而不是attr()？
  对于selected这种布尔类型的属性，jQuery推荐用prop()来操作，它能更准确地同步DOM元素的实际状态，避免attr()可能出现的属性值和实际状态不同步的问题。
• 是否需要触发change事件？
  如果你的默认选项（比如--Please make a selection--）对应着隐藏所有面板的状态，那可以解开trigger('change')的注释，这样重置选项的同时也会触发面板的切换；如果不需要，直接保留默认代码就行。

效果验证 #

现在当你点击离开某个.search里的下拉菜单时，它会自动回到第一个默认选项，下次再切换回这个菜单时，就可以直接选择任意选项，不会出现必须先选其他选项的问题啦！

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