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:
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.
how about readonly/disabled?
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.
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.
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.
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
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.
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
.
If you disable the select:
if you need the value on the server side, just enable it in the script right before the submit
Thanks for great HTML tips.
HTML web design
Try it:
...select onfocus="this.initialSelect = this.selectedIndex;" onchange="this.selectedIndex = this.initialSelect;"...
Solução em JavaScript:
'<'select onfocus="this.initialSelect = this.selectedIndex;" onchange="this.selectedIndex = this.initialSelect;"'>'
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
Good trick. As revange I invite You to site about my country.
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.
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
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
This is really good and interesting piece of work. i liked it,and wanted to know more about it.
all values in the list and not be able to select a new value. tinggi badan
why even bother with html coding when advanced cms scripts are available..
-blu ray ripper software and bluray dvd ripper
These codes are very helpful, because some condition i required to show my content read only.
Please change to 0 index instead of 1
Post a Comment