Choices.js报错：Cannot read properties of undefined (reading 'removeLoadingState') 求助

问题根源 #

你在AJAX请求的success回调里重复创建了Choices实例——初始页面渲染时该组件已经完成初始化，重复绑定同一个DOM元素会导致内部状态混乱，触发removeLoadingState读取undefined的报错。

修复方案 #

1. 全局保存Choices实例（页面初始化时创建） #

把Choices实例的初始化移到页面加载完成时执行，并保存为全局变量，避免重复创建：

let memberChoicesInstance;

$(document).ready(function() {
    // 初始化Choices组件并保存实例
    memberChoicesInstance = new Choices(document.getElementById('member_id'), {
        searchEnabled: true,
        placeholderValue: "{{ __('Select a Member') }}"
    });
});

2. 修改AJAX回调逻辑，复用已有的实例 #

在success回调里直接用全局实例更新选项，而不是重新创建：

$("#createFemberForm").submit(function(event) {
    event.preventDefault();
    var formData = new FormData(this);
    
    $.ajax({
        method: "POST",
        url: '{{ route('members.ajax.store') }}',
        data: formData,
        dataType: "json",
        contentType: false,
        processData: false,
        success: function(response) {
            // 清空现有选项
            memberChoicesInstance.clearChoices();
            
            // 构造新选项数组
            const newChoices = [];
            for (const memberId in response.members) {
                if (response.members.hasOwnProperty(memberId)) {
                    newChoices.push({
                        value: memberId,
                        label: response.members[memberId]
                    });
                }
            }
            
            // 加载新选项（最后一个参数false表示不保留旧选项）
            memberChoicesInstance.setChoices(newChoices, 'value', 'label', false);
            
            // 设置选中刚创建的成员
            memberChoicesInstance.setValue([{ value: response.member_id }]);
            
            // 关闭模态框
            memberModal.style.display = 'none';
        }
    });
});

3. 优化Blade模板（可选） #

将HTML属性里的searchEnabled等配置移到JS初始化参数后，可以移除冗余的HTML属性：

{{ Form::select('member_id', $members, null, ['class' => 'form-control choices', 'placeholder' => __('Select a Member')]) }}

关键说明 #

• 同一个DOM元素只能绑定一个Choices实例，重复创建会导致内部状态冲突
• 使用clearChoices()清空旧选项后，再用setChoices()加载新数据，避免新旧选项混杂
• setValue()方法需要传入包含value的对象数组，比setValueByChoice更稳定

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