Readonly dropdowns

January 21, 2011

As a developer you probably meet this problem at one point – how to make the dropdown select a readonly element. This works just find with other inputs where you can say readonly=”readonly”, but a <select> does not have this option – it has only the disabled=”disabled”, but this will not post the element.

My solution is a little bit of jQuery (this can be done in plain javascript too, but it’s a bit longer code), that disables all off the <option> tags that are not selected – then the <select> still is available for post with the current selected <option> tags and with the rest disabled so that the <select> can be viewed but not changed (Read Only).

The code for readonly:
$("#selectid option").not(":selected").attr("disabled", "disabled");
The code for resetting:
$("#selectid option").not(":selected").attr("disabled", "");

Hope this helped.
Do you have a better/easier solution? Please share.