[Solved- 4 Answers] how to set select element as readonly

PROBLEM :
According to HTML specs, the select tag in HTML doesn’t have a read only attribute, only a disabled attribute. So if you want to keep the user from changing the drop down, you have to use disabled.

• The only problem is that disabled HTML form inputs don’t get included in the POST / GET data.
• What’s the best way to emulate the read only attribute for a select tag, and still get the POST data?

SOLUTION 1 :

• You should keep the select element disabled but also add another hidden input with the same name and value.
• If you reenable your SELECT, you should copy its value to the hidden input in an onchange event and disable (or remove) the hidden input.
• Here is a demo :

[pastacode lang=”markup” manual=”%24(‘%23mainform’).submit(function()%20%7B%0A%20%20%20%20%24(‘%23formdata_container’).show()%3B%0A%20%20%20%20%24(‘%23formdata’).html(%24(this).serialize())%3B%0A%20%20%20%20return%20false%3B%0A%7D)%3B%0A%0A%24(‘%23enableselect’).click(function()%20%7B%0A%20%20%20%20%24(‘%23mainform%20input%5Bname%3Danimal%5D’)%0A%20%20%20%20%20%20%20%20.attr(%22disabled%22%2C%20true)%3B%0A%20%20%20%20%0A%20%20%20%20%24(‘%23animal-select’)%0A%20%20%20%20%20%20%20%20.attr(‘disabled’%2C%20false)%0A%20%20%20%20%09.attr(‘name’%2C%20’animal’)%3B%0A%20%20%20%20%0A%20%20%20%20%24(‘%23enableselect’).hide()%3B%0A%20%20%20%20return%20false%3B%0A%7D)%3B%0A” message=”html code” highlight=”” provider=”manual”/] [ad type=”banner”] [pastacode lang=”markup” manual=”%23formdata_container%20%7B%0A%20%20%20%20padding%3A%2010px%3B%0A%7D%0A” message=”html code” highlight=”” provider=”manual”/] [pastacode lang=”markup” manual=”%3Cscript%20src%3D%22https%3A%2F%2Fajax.googleapis.com%2Fajax%2Flibs%2Fjquery%2F2.1.1%2Fjquery.min.js%22%3E%3C%2Fscript%3E%0A%3Cdiv%3E%0A%20%20%20%20%3Cform%20id%3D%22mainform%22%3E%0A%20%20%20%20%20%20%20%20%3Cselect%20id%3D%22animal-select%22%20disabled%3D%22true%22%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%3Coption%20value%3D%22cat%22%20selected%3ECat%3C%2Foption%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%3Coption%20value%3D%22dog%22%3EDog%3C%2Foption%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%3Coption%20value%3D%22hamster%22%3EHamster%3C%2Foption%3E%0A%20%20%20%20%20%20%20%20%3C%2Fselect%3E%0A%20%20%20%20%20%20%20%20%3Cinput%20type%3D%22hidden%22%20name%3D%22animal%22%20value%3D%22cat%22%2F%3E%0A%20%20%20%20%20%20%20%20%3Cbutton%20id%3D%22enableselect%22%3EEnable%3C%2Fbutton%3E%0A%20%20%20%20%20%20%20%20%0A” message=”html code” highlight=”” provider=”manual”/] [pastacode lang=”markup” manual=”%3Cselect%20name%3D%22color%22%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%3Coption%20value%3D%22blue%22%20selected%3EBlue%3C%2Foption%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%3Coption%20value%3D%22green%22%3EGreen%3C%2Foption%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%3Coption%20value%3D%22red%22%3ERed%3C%2Foption%3E%0A%20%20%20%20%20%20%20%20%3C%2Fselect%3E%0A%0A%20%20%20%20%20%20%20%20%3Cinput%20type%3D%22submit%22%2F%3E%0A%20%20%20%20%3C%2Fform%3E%0A%3C%2Fdiv%3E%0A%0A%3Cdiv%20id%3D%22formdata_container%22%20style%3D%22display%3Anone%22%3E%0A%20%20%20%20%3Cdiv%3ESubmitted%20data%3A%3C%2Fdiv%3E%0A%20%20%20%20%3Cdiv%20id%3D%22formdata%22%3E%0A%20%20%20%20%3C%2Fdiv%3E%0A%3C%2Fdiv%3E%0A” message=”html code” highlight=”” provider=”manual”/]

SOLUTION 2 :

• We could also use this demo:
• Disable all except the selected option:

[pastacode lang=”markup” manual=”%3Cselect%3E%0A%3Coption%20disabled%3D%22disabled%22%3E1%3C%2Foption%3E%0A%3Coption%20selected%3D%22selected%22%3E2%3C%2Foption%3E%0A%3Coption%20disabled%3D%22disabled%22%3E3%3C%2Foption%3E%0A%3C%2Fselect%3E%0A” message=”Html Code” highlight=”” provider=”manual”/]

• This way the dropdown still works (and submits its value) but the user can not select another value.

SOLUTION 3 :

This is one way for using Simple jQuery solution

[pastacode lang=”javascript” manual=”jQuery(‘select.readonly%20option%3Anot(%3Aselected)’).attr(‘disabled’%2Ctrue)%3B%0A” message=”Javascript Code” highlight=”” provider=”manual”/] [ad type=”banner”]

SOLUTION 4 :

• The another way of doing a readOnly attribute to a select element is by using css you can do the following:

[pastacode lang=”javascript” manual=”%24(‘%23selection’).css(‘pointer-events’%2C’none’)%3B%0A” message=”Javascript Code” highlight=”” provider=”manual”/]