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

Could you do it with an onchange event?

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

Answer 2

What are your UI reasons for not disabling the select?

If a control can't be modified, it needs to take on a disabled look otherwise you're going to really confuse your users.

Answer 3

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 4

@Jack & @17 of 26, good point but the end user will be expecting the select box to be disabled so that confusion shouldn't be an issue.

I should have been clearer about why I couldn't just disable the control.

The application that will be using this will need to disable the selection of the options and there is a requirement that the "locked" control still maintain the look and feel of normal form controls.