Restrict selection of SELECT option without disabling the field

Question

I have a multiple selection SELECT field which I don't want the end user to be able to change the value of.

For UI reasons, I would like to be able to do this without using the disabled="true" attribute. I've tried using onmousedown, onfocus, onclick and setting each to blur or return false but with no success.

Can this be done or am I trying to do the impossible?

Answer 1

I know you mentioned that you don't want to, but I actually think that using the disabled attribute is a better solution:

<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>

If necessary, you can always give the select a class and style it with CSS. This solution will work in all browsers regardless of scripting capabilities.

Answer 2

Could you do it with an onchange event?

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

Answer 3

Your best bet would be to swap out the options within the select box. If you only have one answer in that box, it doesn't matter if it is clickable.

I would, however, try to find another way of doing this as it seems like it would cause frustration for a user. Imagine this user scenario:

1. "Look, a select box of options."
2. click
3. "Hrm, why didn't that work?"
4. click
5. click!
6. "This stupid thing is broken, I'm never coming back here."

If you swap out the select for HTML text, it accomplishes the same goal. This is a fairly simple task for most of the major Javascript frameworks.