为jQuery插件searchableSelect添加清空下拉选中值的函数

嗨，我来帮你搞定这个需求！要给你的searchableSelect jQuery插件添加清空下拉选中值的功能，我们可以在插件的原型方法里新增一个clear函数，同时处理好插件内部的状态和UI同步更新。

完整插件代码（包含新增的清空功能） #

(function ($) {
    // 不区分大小写的jQuery :contains选择器
    $.expr[":"].searchableSelectContains = $.expr.createPseudo(function (arg) {
        return function (elem) {
            return $(elem).text().toUpperCase().indexOf(arg.toUpperCase()) >= 0;
        };
    });

    $.searchableSelect = function (element, options) {
        var defaults = {
            // 保留你原有的插件默认配置项
        };
        this.options = $.extend({}, defaults, options);
        this.$element = $(element);
        this.init();
    };

    $.searchableSelect.prototype = {
        init: function () {
            // 你的原有初始化逻辑，比如创建搜索框、下拉列表容器等
            // 假设你已经定义了这些UI元素的引用：this.$selectedDisplay、this.$dropdownItems等
        },

        // 新增的清空选中值方法
        clear: function () {
            // 1. 重置原生select的选中状态，保证表单提交等场景值正确
            this.$element.val('');
            
            // 2. 更新插件的选中值显示UI（替换成你插件里实际的显示元素）
            if (this.$selectedDisplay) {
                this.$selectedDisplay.text('请选择'); // 改成你默认的提示文本
            }
            
            // 3. 重置下拉列表的选中高亮状态
            if (this.$dropdownItems) {
                this.$dropdownItems.removeClass('selected');
            }
            
            // 4. 触发change事件，让依赖该select的逻辑能响应变化
            this.$element.trigger('change');
        }
    };

    // 插件的jQuery调用包装器
    $.fn.searchableSelect = function (options) {
        return this.each(function () {
            if (!$(this).data('searchableSelect')) {
                $(this).data('searchableSelect', new $.searchableSelect(this, options));
            }
        });
    };
})(jQuery);

如何调用清空功能 #

当你需要清空指定的searchableSelect下拉框时，只需获取插件实例并调用clear方法：

// 示例：清空id为mySearchSelect的下拉框
$('#mySearchSelect').data('searchableSelect').clear();

关键细节说明 #

• 同步原生select：必须更新原生<select>元素的值，避免表单提交或其他依赖原生组件的逻辑出错。
• UI同步：根据你插件的实际UI结构，调整clear方法里的元素引用，确保界面显示和实际值一致。
• 触发事件：手动触发change事件，保证所有监听该select变化的回调函数都能正常执行。

如果你的插件原有结构和上面的假设略有差异（比如UI元素的命名不同），只需要修改clear方法里对应的元素引用即可适配。

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