限制选择 SELECT 选项而不禁用该字段

StackOverflow https://stackoverflow.com/questions/43874

题

我有一个多重选择 SELECT 字段，我不希望最终用户能够更改其值。

出于用户界面的原因，我希望能够在不使用disabled =“true”属性的情况下执行此操作。我尝试过使用 onmousedown、onfocus、onclick 并将每个设置为模糊或返回 false，但没有成功。

这可以做到还是我正在尝试做不可能的事情？

有帮助吗？

解决方案

我知道你提到过你不想这样做，但我实际上认为使用 disabled 属性是一个更好的解决方案：

<select multiple="multiple">
    <option value="volvo" selected="true" disabled="disabled">Volvo</option>
    <option value="saab" disabled="disabled">Saab</option>
    <option value="opel" disabled="disabled">Opel</option>
    <option value="audi" disabled="disabled">Audi</option>
</select>

如果有必要，您可以随时提供 select A class 并使用 CSS 对其进行样式设置。无论脚本功能如何，该解决方案都适用于所有浏览器。

其他提示

你能用一个来做吗 onchange 事件？

<select onfocus="this.oldIndex=this.selectedIndex" onchange="this.selectedIndex=this.oldIndex">

最好的选择是交换选择框中的选项。如果该框中只有一个答案，则它是否可点击并不重要。

然而，我会尝试找到另一种方法来做到这一点，因为这似乎会给用户带来挫败感。想象一下这个用户场景：

  1. “看，一个选择框。”
  2. 点击
  3. “嗯，为什么没效果？”
  4. 点击
  5. 点击!
  6. “这个蠢东西已经坏了，我再也不会回到这里了。”

如果您将选择替换为 HTML 文本，则可以实现相同的目标。对于大多数主要的 Javascript 框架来说，这是一个相当简单的任务。

@Jack & @17 of 26，好点，但最终用户会期望禁用选择框，这样混乱就不会成为问题。

我应该更清楚为什么我不能禁用该控件。

将使用此功能的应用程序需要禁用选项的选择，并且要求“锁定”控件仍保持正常表单控件的外观和感觉。

试试这个触发器。

<select multiple onchange="this.selectedIndex=this.selectedIndex">
<option>1</option>
<option>2</option>
</select>

CSS3 最近添加了一个新内容，即 95%兼容 与除 Opera Mini 之外的所有当前浏览器一起使用，称为 pointer-events. 。简而言之，您可以“禁用”默认操作 SELECT 或任何其他元素，并且仍然能够对其执行特定事件......

您可以查看 Chris Coyier 关于它们的文章： 在此输入链接描述.

这更接近您正在寻找的东西吗？抱歉，我无法提供任何我自己的编码示例......

许可以下： CC-BY-SA 和 归因
不隶属于 StackOverflow
scroll top