如何防止用户在不使用禁用的情况下更改选择的值？

Question

我有一个大表单，其中有很多字段，包括一些选择选项。我想防止用户在不使用“禁用”的情况下更改选择选项。因为disabled不包含POST请求中的字段。

我用 javascript 尝试了以下操作：

field.readonly = true;

但我发现 readonly 不能像文本输入那样与 select 一起使用。那么我如何阻止用户更改选择值。请记住，我想通过表单发布来发布 select 的值。

Answer 1

pointer-events: none;您只需在 select 标签中使用 css 属性即可。它可以防止在下拉列表中触发任何点击，从而使下拉列表不起作用，并且您也可以在表单提交中获取下拉列表的值。

.disabledByMe{
  pointer-events: none;
}

<select name="test" class="disabledByMe">
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="mercedes">Mercedes</option>
  <option value="audi">Audi</option>
</select>