Laravel Blade中如何禁用下拉框并保留预选值入库？

问题根源 #

HTML规范中，<select>元素不支持readonly属性，所以你设置readonly=true后仍能修改选项；而disabled属性会让表单提交时忽略该字段的值，导致无法保存到数据库。

可行解决方案 #

方案1：隐藏字段+禁用下拉框（最稳妥）

通过隐藏字段存储要提交的值，同时将下拉框设为禁用仅用于展示：

// 新增隐藏字段，提交时会传递该值
{{ Form::hidden('name[]', $name ?? '') }}

// 下拉框设为禁用，修改name避免与隐藏字段冲突
{{ Form::select('name_display[]', $names, $name ?? '', [
    'class'=>'form-control name input_fields',
    'disabled'=>true,
    'id'=>'name'
]) }}

提交表单时，后台会获取到隐藏字段name[]的预选值，下拉框仅作为展示控件无法修改。

方案2：JavaScript阻止交互（保留原字段结构）

保留下拉框的原name属性，用JS禁止用户修改选项：

{{ Form::select('name[]', $names, $name ?? '', [
    'class'=>'form-control name input_fields readonly-select',
    'id'=>'name'
]) }}

添加JavaScript代码：

const selectEl = document.querySelector('.readonly-select');
// 阻止鼠标点击展开下拉
selectEl.addEventListener('mousedown', (e) => e.preventDefault());
// 阻止键盘操作修改选项
selectEl.addEventListener('keydown', (e) => e.preventDefault());

这种方式下拉框外观不变，但用户无法修改选项，表单提交时能正常传递值。

方案3：CSS+JS双重防护（防控制台篡改）

如果担心用户通过浏览器控制台修改DOM解除禁用，可结合CSS视觉禁用和JS交互阻止：

.readonly-select {
    pointer-events: none;
    background-color: #e9ecef;
    color: #6c757d;
    border-color: #ced4da;
}

再加上方案2的JavaScript代码，既从视觉上呈现禁用状态，又从交互层面阻止修改，同时保证表单能提交值。

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