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

时间:2008-09-04 14:30:06

标签: html user-interface html-select

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

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

可以这样做,还是我想做不可能的事?

6 个答案:

答案 0 :(得分:8)

我知道你提到过你不想这样做,但我实际上认为使用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提供class并使用CSS设置样式。无论脚本功能如何,此解决方案都适用于所有浏览器。

答案 1 :(得分:2)

您可以使用onchange活动吗?

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

答案 2 :(得分:2)

您最好的选择是更换选择框中的选项。如果您在该框中只有一个答案,那么它是否可点击无关紧要。

但是,我会尝试找到另一种方法,因为它似乎会导致用户感到沮丧。想象一下这个用户场景:

  1. “看,选择一盒选项。”
  2. 点击
  3. “嗯,为什么那不起作用?”
  4. 点击
  5. 点击
  6. “这个愚蠢的事情被打破了,我永远不会回到这里。”
  7. 如果您替换HTML文本的选择,它将实现相同的目标。对于大多数主要的Javascript框架来说,这是一项相当简单的任务。

答案 3 :(得分:0)

@Jack&amp; @ 17 of 26,好点,但最终用户希望禁用选择框,这样就不会出现混淆问题。

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

将要使用它的应用程序将需要禁用选项的选择,并且要求“锁定”控件仍然保持正常表单控件的外观。

答案 4 :(得分:0)

尝试此触发器。

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

答案 5 :(得分:0)

CSS3最近新增了一个95% compatible除了Opera Mini之外的所有当前浏览器,名为pointer-events。简而言之,您可以“禁用”SELECT或任何其他元素的默认操作,并且仍然可以对其执行特定事件...

您可以在enter link description here查看Chris Coyier关于他们的文章。

这是否更接近你正在寻找的...抱歉我无法提供任何我自己的编码示例......