Laravel 9中selectize.js添加required标签后选项不显示的问题求助

安全阿岳

2026-8-7

解决Selectize.js结合Laravel时的占位符与必填校验冲突问题

问题根源

当原生<select>标签添加required属性后，Selectize初始化时会误将空值的占位选项视为无效项过滤，同时原生HTML的必填规则会干扰Selectize的DOM渲染逻辑，导致下拉选项无法显示。

正确实现方案

1. 调整Blade模板中的Select结构

修改<select>标签及内部选项，确保占位选项被正确标记为disabled（避免被原生required规则判定为可选中的无效值）：

<select name="customer_id" class="form-control" id="select_customer" required>
    <!-- 占位选项：disabled确保原生required不将其视为有效选择 -->
    <option value="" disabled>Select customer</option>
    @forelse($customers as $customer)
        <option value="{{ $customer->id }}">{{ $customer->name }}</option>
    @empty
        <option value="" disabled selected>No customer found</option>
    @endforelse
</select>

2. 配置Selectize初始化参数

通过JS配置确保Selectize尊重原生required属性，同时正常加载所有选项：

$('#select_customer').selectize({
    placeholder: 'Select customer',
    // 禁用空选项允许，确保必填校验生效
    allowEmptyOption: false,
    // 初始化时强制保留原生required属性
    onInitialize: function() {
        this.$input.attr('required', true);
    }
});

备选方案：用Selectize自带校验替代原生required

如果不想依赖原生required，可以直接通过Selectize的validate方法实现前端必填校验，同时保留后端Laravel的校验规则：

$('#select_customer').selectize({
    placeholder: 'Select customer',
    validate: function(value) {
        if (!value) {
            return 'Please select a customer';
        }
    }
});