Symfony如何设置禁用/只读select下拉框且提交时保留数据

• 方案1：结合readonly属性 + 交互拦截

原生<select>的readonly属性默认不会阻止下拉展开，需额外补充控制即可实现需求，表单提交时会自动携带选中值：

1. 给select添加readonly属性标记为只读
2. 加CSS属性pointer-events: none禁用鼠标交互
3. 补充键盘事件拦截，避免用户通过键盘快捷键触发下拉
   代码示例：

<select name="your_select_name" readonly style="pointer-events: none;" onkeydown="return false;">
  <option value="1" selected>固定选中选项</option>
  <option value="2">其他选项</option>
</select>

• 方案2：新增隐藏域同步存储选中值

如果必须保留select的disabled属性，可新增一个同参数名的隐藏输入框负责提交数据，禁用的select仅做页面展示使用：
代码示例：

<!-- 禁用的下拉框仅用于展示，无需设置name属性 -->
<select disabled>
  <option value="1" selected>固定选中选项</option>
  <option value="2">其他选项</option>
</select>
<!-- 隐藏域负责提交对应参数 -->
<input type="hidden" name="your_select_name" value="1">

该方案兼容性最高，不存在表单提交漏值的风险。

• 方案3：表单提交前临时移除disabled属性

监听表单提交事件，提交前临时移除select的disabled属性，提交完成后再恢复禁用状态即可：
原生JS代码示例：

const targetForm = document.querySelector('#form_id');
const disabledSelect = document.querySelector('#select_id');

targetForm.addEventListener('submit', function() {
  // 提交前移除禁用属性，保证数据被正常序列化
  disabledSelect.removeAttribute('disabled');
  // 异步提交场景可在请求回调中重新加回禁用属性，同步提交可直接加延时恢复
  setTimeout(() => {
    disabledSelect.setAttribute('disabled', true);
  }, 0);
});

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