Saturday, March 22, 2008

Making a HTML select readonly

For some time ago I needed to make a single select <select> element readonly. This meant that the user should be able to see all values in the list and not be able to select a new value. There is no readonly attribute available for the <select> element and disabling the field was not an option since we needed the value on the serverside. Some simple javascript did the job:


<select name="theselect" onchange="this.selectedIndex = 1;">
<option value="Red">Red</option>
<option value="Green" selected="selected">Green</option>
<option value="Blue">Blue</option>
</select>

Initial value is green and it should continue to be. This solution rely on the possibility to apply the correct onchange eventlistener during the page rendition - in this case through a taglib. I have created a simple test page for myself here.

22 comments:

Anonymous said...

Good trick -- but a hidden field might serve your needs better (albeit with more complicated server side logic) if you need to support clients that have javascript turned off.

Anonymous said...

how about readonly/disabled?

Unknown said...

Disabling the select element is still the right choice. The user doesn't need the ability to scroll through options they can't change, and you shouldn't rely on the client to protect the value. In this case, you'll want to save/retrieve the value in the server's session, and only provide a disabled select element for informational purposes.

Eric Wendelin said...

This is nice and quick and the readonly attribute will not work in this case (as far as I have tested). I really think another structure other than a select element would be best here as this functionality will break if the user disables javascript.

Anonymous said...

Not bad. Disabling the select element is not always the right choice because, as mentioned above you might still need the value server side. If you use disabled in this case, you need to right more code to put the value in a hidden field.

Anonymous said...

This quick fix worked for me I would say. However, users should keep in mind that they may need to use a hidden field to keep the original value and onChange function should be setting selectedIndex to the corresponding index for the hidden field. Thanks for the post. I appreciate your effort. Good work

Anonymous said...

If you know it's going to be readonly, just taket the selected value and show it in a readonly text field. There's no point in showing a dropdown of options if you can't change it. That's bad usability.

CodePug said...

I have created a JavaScript snippet that will allow you to make your HTML select controls read-only simply by giving them an ID attribute and calling the script available on my site at http://www.codepug.com/readonlySelect.html

Happy coding!
--X
.

Anonymous said...

If you disable the select:
if you need the value on the server side, just enable it in the script right before the submit

Ben said...

Thanks for great HTML tips.
HTML web design

Unihost Brasil - Servidores de hospedagem! said...

Try it:

...select onfocus="this.initialSelect = this.selectedIndex;" onchange="this.selectedIndex = this.initialSelect;"...

Unknown said...

Solução em JavaScript:

'<'select onfocus="this.initialSelect = this.selectedIndex;" onchange="this.selectedIndex = this.initialSelect;"'>'

Unknown said...

This is a nice quick, read-only attribute will not be in this case, (as far as I tested). I really do not think another structural elements of the other options, the best here, because this function will break, if the user disables JavaScript.

Thesis | Dissertation | Essay | Assignment

Anonymous said...

Good trick. As revange I invite You to site about my country.

Unknown said...

But what i want to say is, if you do not want the user to select the other options then why to show them.

Just remove other options. That's It.

Amber Melton said...

This is a nice quick, read-only attribute will not be in this case, (as far as I tested). I really do not think another structural elements of the other options, the best here, because this function will break, if the user disables JavaScript. Kitchen Products Spy Pen Camera Automobile SEO Services Herbal Products

logo design - logoinn said...

Why we disable the select element, I don't think its a right choice.There must be an another way
Website design
Logo design

custom papers said...

custom papers

This is really good and interesting piece of work. i liked it,and wanted to know more about it.

aweseome blogger said...

all values in the list and not be able to select a new value. tinggi badan

Andy said...

why even bother with html coding when advanced cms scripts are available..

-blu ray ripper software and bluray dvd ripper

Online degree said...

These codes are very helpful, because some condition i required to show my content read only.

kablu said...

Please change to 0 index instead of 1