HTML form readonly SELECT tag input

Question

According to HTML specs  the select tag in HTML doesn t have a readonly attribute  only a disabled attribute  So if you want to keep the user from changing the dropdown  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 readonly attribute for a select tag  and still get the POST data

User · Accepted Answer

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    x000D   x000D      mainform   submit function     x000D          formdata container   show    x000D          formdata   html   this  serialize     x000D      return false  x000D      x000D   x000D      enableselect   click function     x000D          mainform input name animal    x000D           attr  disabled   true   x000D       x000D          animal-select   x000D           attr  disabled   false  x000D        attr  name    animal    x000D       x000D          enableselect   hide    x000D      return false  x000D      x000D   formdata container   x000D      padding  10px  x000D    x000D   lt script src  https   ajax googleapis com ajax libs jquery 2 1 1 jquery min js  gt  lt  script gt  x000D   lt div gt  x000D       lt form id  mainform  gt  x000D           lt select id  animal-select  disabled  true  gt  x000D               lt option value  cat  selected gt Cat lt  option gt  x000D               lt option value  dog  gt Dog lt  option gt  x000D               lt option value  hamster  gt Hamster lt  option gt  x000D           lt  select gt  x000D           lt input type  hidden  name  animal  value  cat   gt  x000D           lt button id  enableselect  gt Enable lt  button gt  x000D           x000D           lt select name  color  gt  x000D               lt option value  blue  selected gt Blue lt  option gt  x000D               lt option value  green  gt Green lt  option gt  x000D               lt option value  red  gt Red lt  option gt  x000D           lt  select gt  x000D   x000D           lt input type  submit   gt  x000D       lt  form gt  x000D   lt  div gt  x000D   x000D   lt div id  formdata container  style  display none  gt  x000D       lt div gt Submitted data  lt  div gt  x000D       lt div id  formdata  gt  x000D       lt  div gt  x000D   lt  div gt  x000D   x000D   x000D

User · Answer

You can re-enable the select object on submit   EDIT  i e   normally disabling the select tag  with the disabled attribute  and then re-enabling it automatically just before submiting the form   Example with jQuery    To disable it       yourSelect   prop  disabled   true    To re-enable it before submission so that GET   POST data is included       yourForm   on  submit   function             yourSelect   prop  disabled   false          In addition  you could re-enable every disabled input or select       yourForm   on  submit   function            input  select   prop  disabled   false

User · Answer

If the select dropdown is read-only since birth and does not need to change at all  perhaps you should use another control instead  Like a simple  lt div gt   plus hidden form field  or an  lt input type  text  gt    Added  If the dropdown is not read-only all the time and JavaScript is used to enable disable it  then this is still a solution - just modify the DOM on-the-fly

User · Answer

I know this won t help everyone  if you are client side only  but will help some who are full stack and have control of backend as well as front   If a user does not have priviledge to edit a field  I only return the current selection for the drop down   Here is some of my backend controller            region Prepare Action Priviledges         editAuditVM ExtAuditEditRoleMatrixVM   new ExtAuditEditRoleMatrixVM                       CanEditAcn    extAuditEditRoleMatrixHelper CanEditAcn user  audit               CanEditSensitiveDesignation    extAuditEditRoleMatrixHelper CanEditSensitiveDesignation user  audit               CanEditTitle    extAuditEditRoleMatrixHelper CanEditTitle                CanEditAuditScope    extAuditEditRoleMatrixHelper CanEditAuditScope user  audit                      endregion            region Prepare SelectLists for Drop Downs          region AuditScope List         IQueryable lt SelectListItem gt  auditScopes    auditTypesRepo AuditTypes              Where at   gt  at AuditTypeClassCode ToLower       e                Select at   gt  new SelectListItem               Text   at AuditTypeText  Value   at AuditTypeID ToString                  Cannot make a select readonly on client side              So only return currently selected option          if   editAuditVM ExtAuditEditRoleMatrixVM CanEditAuditScope                        auditScopes   auditScopes                  Where ascopeId   gt  ascopeId Value    editAuditVM ExternalAudit AuditTypeID ToString                        endregion          endregion

User · Answer

Set the select disabled when you plan for it to be read-only and then remove the disabled attribute just before submitting the form      global variable to store original event handler for save button var form save button func   null      function to get jQuery object for save button function get form button by id button id        return jQuery  input type button    button id         alter value of disabled element function set disabled elem value elem id  value         jQuery     elem id  removeAttr  disabled        jQuery     elem id  val value       jQuery     elem id  attr  disabled   disabled       function set form bottom button save custom code generic msg           save original event handler that was either declared        through javascript or html onclick attribute        in a global variable     form save button func   get form button by id  BtnSave   prop  onclick       jQuery 1 6       form save button func   get form button by id  BtnSave   prop  onclick       jQuery 1 7         unbind original event handler  can use any of following statements below      get form button by value  BtnSave   unbind  click        get form button by value  BtnSave   removeAttr  onclick            alternate save code which also calls original event handler stored in global variable     get form button by value  BtnSave   click function event           event preventDefault            var confirm result   confirm msg           if  confirm result                if  jQuery  form anyForm   find  input type text   textarea  select   filter   disabled-form-elem   length  gt  0                    jQuery  form anyForm   find  input type text   textarea  select   filter   disabled-form-elem   removeAttr  disabled                                  disallow further editing of fields once save operation is underway                by making them readonly                you can also disallow form editing by showing a large transparent                div over form such as loading animation with  Saving  message text             jQuery  form anyForm   find  input type text   textarea  select   attr  ReadOnly   True                    now execute original event handler             form save button func                           document  ready function            if you want to define save button code in javascript then define it now         code below for record update     set form bottom button save custom code generic  Do you really want to update this record            code below for new record       set form bottom button save custom code generic  Do you really want to create this new record             start disabling elements on form load by also adding a class to identify disabled elements     jQuery  input type text  phone   addClass  disabled-form-elem   attr  disabled   disabled        jQuery  input type text  fax   addClass  disabled-form-elem   attr  disabled   disabled        jQuery  select country   addClass  disabled-form-elem   attr  disabled   disabled        jQuery  textarea address   addClass  disabled-form-elem   attr  disabled   disabled         set disabled elem value  phone    123121231        set disabled elem value  fax    123123123        set disabled elem value  country    Pakistan        set disabled elem value  address    address            end of   document  ready function

User · Answer

I managed it by hiding the select box and showing a span in its place with only informational value  On the event of disabling the  readonly class  we need also to remove the  toVanish elements and show the  toShow ones         readonly    live   focus   function e                       this   attr   readonly    readonly                    if     this   get 0  tagName     SELECT                             this   before    lt span class  toVanish readonly  style  border 1px solid  padding 5px  gt                                     this   find   option selected    html       lt  span gt                            this   addClass   toShow                           this   hide

User · Answer

If you have a select tag that should be readonly you have to  logically  transform the select box in a single  text  field   I say logically because it s like   I have to display a value to user   No matter if the value comes from a select tag  is still a single value and cannot be changed  readonly    So  logically  you use a select tag only when you first insert the value   Then  when you need to display this value  you have to put it on a  text field-readonly    Same for a multiple-select that becomes a list of values  the selected value  if readonly  I use  text  because a readonly-tag doesn t need a  type  attribute  Cheers

User · Answer

Rather than the select itself  you could disable all of the options except for the currently selected option   This gives the appearance of a working drop-down  but only the option you want passed in is a valid selection

User · Answer

very simple  First store  value in variable  Then on change event set value to stored variable that holds initial value of   I have a  whose name is mapping  Then my code will be as follows      document   ready function         var mapping    select name mapping    val           select name mapping    change function               select name mapping    val mapping

User · Answer

We could also use this   Disable all except the selected option    lt select gt       lt option disabled gt 1 lt  option gt       lt option selected gt 2 lt  option gt       lt option disabled gt 3 lt  option gt   lt  select gt    This way the dropdown still works  and submits its value  but the user can not select another value   Demo

User · Answer

Here s an attempt to use a custom jQuery function to achieve the functionality  as mentioned here      function        prototype toggleDisable   function flag           prepare some values     var selectId     this  attr  id        var hiddenId   selectId    hidden       if  flag             disable the select - however this will not submit the value of the select          a new hidden form element will be created below to compensate for the           non-submitted select value          this  attr  disabled   true             gather attributes       var selectVal     this  val          var selectName     this  attr  name              creates a hidden form element to submit the value of the disabled select         this  parents  form   append     lt input gt  lt  input gt             attr  type    hidden            attr  id   hiddenId           attr  name   selectName           val selectVal           else            remove the newly-created hidden form element         this  parents  form   remove hiddenId            enable back the element         this  removeAttr  disabled                    Usage          some select element   toggleDisable true            some select element   toggleDisable false

User · Answer

If you disable a form field  this won t be sent when form is submitted  So if you need a readonly that works like disabled but sending values do this   After any change in readonly properties of an element     select readonly option not  selected    attr  disabled  true       select not  readonly   option   removeAttr  disabled

User · Answer

This is the best solution I have found       YourSELECTIdHere option not  selected    prop  disabled   true     The code above disables all other options not selected while keeping the selected option enabled  Doing so the selected option will make it into the post-back data

User · Answer

Rather than the select itself  you could disable all of the options except for the currently selected option   This gives the appearance of a working drop-down  but only the option you want passed in is a valid selection

User · Answer

Solution with tabindex  Works with select but also text inputs    Simply use a  disabled class   CSS    disabled       pointer-events none     No cursor        background-color   eee     Gray background        JS       disabled   attr  tabindex    -1      HTML    lt select class  disabled  gt       lt option value  0  gt 0 lt  option gt   lt  select gt    lt input type  text  class  disabled    gt      Edit  With Internet Explorer  you also need this JS     document  on  mousedown     disabled   function  e        e preventDefault

User · Answer

html solution       lt select onfocus  this blur     gt    javascript ones      selectElement addEventListener  focus   selectElement blur  true     selectElement attachEvent  focus   selectElement blur     thanks  IE   to remove      selectElement removeEventListener  focus   selectElement blur  true     selectElement detachEvent  focus   selectElement blur     thanks  IE   edit  added remove methods

User · Answer

If you are using jquery validate  you can do the following below  I used the disabled attribute without a problem     function            myform   validate           submitHandler function form                  select   removeAttr  disabled                form submit

User · Answer

Below worked for me       select name country    attr  disabled    disabled

User · Answer

another way of doing a readOnly attribute to a select element is by using css  you could do like        selection   css  pointer-events   none      DEMO

User · Answer

Simple CSS solution   select readonly       background   eee      cursor no-drop     select readonly  option      display none      This results in Select to be gray with nice  disable  cursor on hover and on select the list of options is  empty  so you can not change its value

User · Answer

In IE I was able to defeat the onfocus  onblur approach by double-clicking  But remembering the value and then restoring it in the onchange event seems to handle that issue    lt select onfocus  this oldvalue this value this blur     onchange  this value this oldvalue   gt        lt  select gt    You can do similar without expando properties by using a javascript variable

User · Answer

I resolved it with jquery            select myselect   bind  focus   function            if   this  hasClass  readonly                          this  blur                 return

User · Answer

If you have a select tag that should be readonly you have to  logically  transform the select box in a single  text  field   I say logically because it s like   I have to display a value to user   No matter if the value comes from a select tag  is still a single value and cannot be changed  readonly    So  logically  you use a select tag only when you first insert the value   Then  when you need to display this value  you have to put it on a  text field-readonly    Same for a multiple-select that becomes a list of values  the selected value  if readonly  I use  text  because a readonly-tag doesn t need a  type  attribute  Cheers

User · Answer

select multiple does not respond nearly as well to the above code suggestions  With MUCH sledgehammering and kludging  I ended up with this   var thisId     var thisVal     function selectAll              thisId   option   each function            if    this  prop  disabled     this  prop  selected  true                     thisId  prop  disabled  false       document  ready function           select option not  selected    attr  disabled  true          select multiple    focus function            thisId   this  prop  id            thisVal   this  val              this  prop  disabled  true  blur            setTimeout  selectAll     200

User · Answer

You can re-enable the select object on submit   EDIT  i e   normally disabling the select tag  with the disabled attribute  and then re-enabling it automatically just before submiting the form   Example with jQuery    To disable it       yourSelect   prop  disabled   true    To re-enable it before submission so that GET   POST data is included       yourForm   on  submit   function             yourSelect   prop  disabled   false          In addition  you could re-enable every disabled input or select       yourForm   on  submit   function            input  select   prop  disabled   false

User · Answer

html solution       lt select onfocus  this blur     gt    javascript ones      selectElement addEventListener  focus   selectElement blur  true     selectElement attachEvent  focus   selectElement blur     thanks  IE   to remove      selectElement removeEventListener  focus   selectElement blur  true     selectElement detachEvent  focus   selectElement blur     thanks  IE   edit  added remove methods

User · Answer

Yet another more contemporary option  no pun intended  is to disable all the options of the select element other then the selected one    note however that this is an HTML 4 0 feature and ie 6 7 8 beta 1 seem to not respect this   http   www gtalbot org BrowserBugsSection MSIE7Bugs OptionDisabledSupport html

User · Answer

Simple jQuery solution  Use this if your selects have the readonly class  jQuery  select readonly option not  selected    attr  disabled  true     Or this if your selects have the readonly  readonly  attribute     select readonly  readonly   option not  selected    attr  disabled  true

User · Answer

very simple  First store  value in variable  Then on change event set value to stored variable that holds initial value of   I have a  whose name is mapping  Then my code will be as follows      document   ready function         var mapping    select name mapping    val           select name mapping    change function               select name mapping    val mapping

User · Answer

input being your  lt select gt  element  input querySelectorAll   not  selected     forEach option   gt      option disabled   true     This will keep the select in the data  as it s not disabled  and only the option that are not selected are disabled  therefore not selectable  The result is a readable select that cannot be changed    gt  read only

User · Answer

What I found works great  with plain javascript  ie  no JQuery library required   is to change the innerHTML of the  lt select gt  tag to the desired single remaining value   Before    lt select name  day  id  day  gt     lt option gt SUN lt  option gt     lt option gt MON lt  option gt     lt option gt TUE lt  option gt     lt option gt WED lt  option gt     lt option gt THU lt  option gt     lt option gt FRI lt  option gt     lt option gt SAT lt  option gt   lt  select gt    Sample Javascript   document getElementById  day   innerHTML     lt option gt FRI lt  option gt      After    lt select name  day  id  day  gt     lt option gt FRI lt  option gt   lt  select gt    This way  no visiual effect change  and this will POST GET within the  lt FORM gt

User · Answer

var selectedOpt   initialize var     var newIdForHidden   initialize var         disabledOnEdit   focusin function            selectedOpt     this  find   selected   val            newIdForHidden     this  attr  id    Hidden             alert selectedOpt     newIdForHidden             this  append                this  find  input hiddenSelectedOpt   attr  id  newIdForHidden  val selectedOpt                   disabledOnEdit   focusout function            var oldSelectedValue   this  find  input hiddenSelectedOpt   val              this  val oldSelectedValue

User · Answer

In IE I was able to defeat the onfocus  onblur approach by double-clicking  But remembering the value and then restoring it in the onchange event seems to handle that issue    lt select onfocus  this oldvalue this value this blur     onchange  this value this oldvalue   gt        lt  select gt    You can do similar without expando properties by using a javascript variable

User · Answer

We could also use this   Disable all except the selected option    lt select gt       lt option disabled gt 1 lt  option gt       lt option selected gt 2 lt  option gt       lt option disabled gt 3 lt  option gt   lt  select gt    This way the dropdown still works  and submits its value  but the user can not select another value   Demo

User · Answer

This is the best solution I have found       YourSELECTIdHere option not  selected    prop  disabled   true     The code above disables all other options not selected while keeping the selected option enabled  Doing so the selected option will make it into the post-back data

User · Answer

Below worked for me       select name country    attr  disabled    disabled

User · Answer

What I found works great  with plain javascript  ie  no JQuery library required   is to change the innerHTML of the  lt select gt  tag to the desired single remaining value   Before    lt select name  day  id  day  gt     lt option gt SUN lt  option gt     lt option gt MON lt  option gt     lt option gt TUE lt  option gt     lt option gt WED lt  option gt     lt option gt THU lt  option gt     lt option gt FRI lt  option gt     lt option gt SAT lt  option gt   lt  select gt    Sample Javascript   document getElementById  day   innerHTML     lt option gt FRI lt  option gt      After    lt select name  day  id  day  gt     lt option gt FRI lt  option gt   lt  select gt    This way  no visiual effect change  and this will POST GET within the  lt FORM gt

User · Answer

You can re-enable the select object on submit   EDIT  i e   normally disabling the select tag  with the disabled attribute  and then re-enabling it automatically just before submiting the form   Example with jQuery    To disable it       yourSelect   prop  disabled   true    To re-enable it before submission so that GET   POST data is included       yourForm   on  submit   function             yourSelect   prop  disabled   false          In addition  you could re-enable every disabled input or select       yourForm   on  submit   function            input  select   prop  disabled   false

User · Answer

Had same problem and found very useful property of form - submitdisabledcontrols   Set that to True and disabled inputs are now POST

User · Answer

What s the best way to emulate the readonly attribute for a select   tag  and still get the POST data    Just make it an input text field and add the  readonly  attribute to it  If the select is effectively  disabled   then you can t change the value anyway  so you don t need the select tag  and you can simply display the  selected  value as a readonly text input  For most UI purposes I think this should suffice

User · Answer

I know this won t help everyone  if you are client side only  but will help some who are full stack and have control of backend as well as front   If a user does not have priviledge to edit a field  I only return the current selection for the drop down   Here is some of my backend controller            region Prepare Action Priviledges         editAuditVM ExtAuditEditRoleMatrixVM   new ExtAuditEditRoleMatrixVM                       CanEditAcn    extAuditEditRoleMatrixHelper CanEditAcn user  audit               CanEditSensitiveDesignation    extAuditEditRoleMatrixHelper CanEditSensitiveDesignation user  audit               CanEditTitle    extAuditEditRoleMatrixHelper CanEditTitle                CanEditAuditScope    extAuditEditRoleMatrixHelper CanEditAuditScope user  audit                      endregion            region Prepare SelectLists for Drop Downs          region AuditScope List         IQueryable lt SelectListItem gt  auditScopes    auditTypesRepo AuditTypes              Where at   gt  at AuditTypeClassCode ToLower       e                Select at   gt  new SelectListItem               Text   at AuditTypeText  Value   at AuditTypeID ToString                  Cannot make a select readonly on client side              So only return currently selected option          if   editAuditVM ExtAuditEditRoleMatrixVM CanEditAuditScope                        auditScopes   auditScopes                  Where ascopeId   gt  ascopeId Value    editAuditVM ExternalAudit AuditTypeID ToString                        endregion          endregion

User · Answer

You can re-enable the select object on submit   EDIT  i e   normally disabling the select tag  with the disabled attribute  and then re-enabling it automatically just before submiting the form   Example with jQuery    To disable it       yourSelect   prop  disabled   true    To re-enable it before submission so that GET   POST data is included       yourForm   on  submit   function             yourSelect   prop  disabled   false          In addition  you could re-enable every disabled input or select       yourForm   on  submit   function            input  select   prop  disabled   false

User · Answer

Set the select disabled when you plan for it to be read-only and then remove the disabled attribute just before submitting the form      global variable to store original event handler for save button var form save button func   null      function to get jQuery object for save button function get form button by id button id        return jQuery  input type button    button id         alter value of disabled element function set disabled elem value elem id  value         jQuery     elem id  removeAttr  disabled        jQuery     elem id  val value       jQuery     elem id  attr  disabled   disabled       function set form bottom button save custom code generic msg           save original event handler that was either declared        through javascript or html onclick attribute        in a global variable     form save button func   get form button by id  BtnSave   prop  onclick       jQuery 1 6       form save button func   get form button by id  BtnSave   prop  onclick       jQuery 1 7         unbind original event handler  can use any of following statements below      get form button by value  BtnSave   unbind  click        get form button by value  BtnSave   removeAttr  onclick            alternate save code which also calls original event handler stored in global variable     get form button by value  BtnSave   click function event           event preventDefault            var confirm result   confirm msg           if  confirm result                if  jQuery  form anyForm   find  input type text   textarea  select   filter   disabled-form-elem   length  gt  0                    jQuery  form anyForm   find  input type text   textarea  select   filter   disabled-form-elem   removeAttr  disabled                                  disallow further editing of fields once save operation is underway                by making them readonly                you can also disallow form editing by showing a large transparent                div over form such as loading animation with  Saving  message text             jQuery  form anyForm   find  input type text   textarea  select   attr  ReadOnly   True                    now execute original event handler             form save button func                           document  ready function            if you want to define save button code in javascript then define it now         code below for record update     set form bottom button save custom code generic  Do you really want to update this record            code below for new record       set form bottom button save custom code generic  Do you really want to create this new record             start disabling elements on form load by also adding a class to identify disabled elements     jQuery  input type text  phone   addClass  disabled-form-elem   attr  disabled   disabled        jQuery  input type text  fax   addClass  disabled-form-elem   attr  disabled   disabled        jQuery  select country   addClass  disabled-form-elem   attr  disabled   disabled        jQuery  textarea address   addClass  disabled-form-elem   attr  disabled   disabled         set disabled elem value  phone    123121231        set disabled elem value  fax    123123123        set disabled elem value  country    Pakistan        set disabled elem value  address    address            end of   document  ready function

User · Answer

This is the simplest and best solution  You will set a readolny attr on your select  or anyother attr like data-readonly  and do the following     select readonly    live  focus mousedown mouseup click  function e       e preventDefault        e stopPropagation

User · Answer

In an option you can use disabled  disabled   instead of on the select itself

User · Answer

Solution with tabindex  Works with select but also text inputs    Simply use a  disabled class   CSS    disabled       pointer-events none     No cursor        background-color   eee     Gray background        JS       disabled   attr  tabindex    -1      HTML    lt select class  disabled  gt       lt option value  0  gt 0 lt  option gt   lt  select gt    lt input type  text  class  disabled    gt      Edit  With Internet Explorer  you also need this JS     document  on  mousedown     disabled   function  e        e preventDefault

User · Answer

Simple CSS solution   select readonly       background   eee      cursor no-drop     select readonly  option      display none      This results in Select to be gray with nice  disable  cursor on hover and on select the list of options is  empty  so you can not change its value

User · Answer

If the select dropdown is read-only since birth and does not need to change at all  perhaps you should use another control instead  Like a simple  lt div gt   plus hidden form field  or an  lt input type  text  gt    Added  If the dropdown is not read-only all the time and JavaScript is used to enable disable it  then this is still a solution - just modify the DOM on-the-fly

User · Answer

I managed it by hiding the select box and showing a span in its place with only informational value  On the event of disabling the  readonly class  we need also to remove the  toVanish elements and show the  toShow ones         readonly    live   focus   function e                       this   attr   readonly    readonly                    if     this   get 0  tagName     SELECT                             this   before    lt span class  toVanish readonly  style  border 1px solid  padding 5px  gt                                     this   find   option selected    html       lt  span gt                            this   addClass   toShow                           this   hide

User · Answer

My solution is to add select readonly    pointer-events  none    style as many people here suggested  and then add this JS to handle keyboard events    document  on  keydown    select readonly    function e        if  e keyCode    9            if  e preventDefault                e preventDefault                       e returnValue   false          e cancel   true             This still allows traversing through the element with tab

User · Answer

var selectedOpt   initialize var     var newIdForHidden   initialize var         disabledOnEdit   focusin function            selectedOpt     this  find   selected   val            newIdForHidden     this  attr  id    Hidden             alert selectedOpt     newIdForHidden             this  append                this  find  input hiddenSelectedOpt   attr  id  newIdForHidden  val selectedOpt                   disabledOnEdit   focusout function            var oldSelectedValue   this  find  input hiddenSelectedOpt   val              this  val oldSelectedValue

User · Answer

Yet another more contemporary option  no pun intended  is to disable all the options of the select element other then the selected one    note however that this is an HTML 4 0 feature and ie 6 7 8 beta 1 seem to not respect this   http   www gtalbot org BrowserBugsSection MSIE7Bugs OptionDisabledSupport html

User · Answer

lt select id  countries  onfocus  this defaultIndex this selectedIndex   onchange  this selectedIndex this defaultIndex   gt   lt option value  1  gt Country1 lt  option gt   lt option value  2  gt Country2 lt  option gt   lt option value  3  gt Country3 lt  option gt   lt option value  4  gt Country4 lt  option gt   lt option value  5  gt Country5 lt  option gt   lt option value  6  gt Country6 lt  option gt   lt option value  7  selected  selected  gt Country7 lt  option gt   lt option value  8  gt Country8 lt  option gt   lt option value  9  gt Country9 lt  option gt   lt  select gt    Tested and working in IE 6  7  amp  8b2  Firefox 2  amp  3  Opera 9 62  Safari 3 2 1 for Windows and Google Chrome

User · Answer

lt select id  countries  onfocus  this defaultIndex this selectedIndex   onchange  this selectedIndex this defaultIndex   gt   lt option value  1  gt Country1 lt  option gt   lt option value  2  gt Country2 lt  option gt   lt option value  3  gt Country3 lt  option gt   lt option value  4  gt Country4 lt  option gt   lt option value  5  gt Country5 lt  option gt   lt option value  6  gt Country6 lt  option gt   lt option value  7  selected  selected  gt Country7 lt  option gt   lt option value  8  gt Country8 lt  option gt   lt option value  9  gt Country9 lt  option gt   lt  select gt    Tested and working in IE 6  7  amp  8b2  Firefox 2  amp  3  Opera 9 62  Safari 3 2 1 for Windows and Google Chrome

User · Answer

Easier still  add the style attribute to your select tag   style  pointer-events  none

User · Answer

Simply  remove the disabled attribute before submit the form          form   submit function                  Id Unidade   attr  disabled   false

User · Answer

In addition to disabling the options that should not be selectable i wanted to actually make them dissapear from the list  but still be able to enable them should i need to later      select readonly    find  option not  selected    hide   attr  disabled  true     This finds all select elements with a readonly attribute  then finds all options inside those selects that are not selected  then it hides them and disables them   It is important to separate the jquery query in 2 for performance reasons  because jquery reads them from right to left  the code       select readonly  option not  selected      will first find all unselected options in the document and then filter those that are inside selects with a readonly attribute

User · Answer

another way of doing a readOnly attribute to a select element is by using css  you could do like        selection   css  pointer-events   none      DEMO

User · Answer

What s the best way to emulate the readonly attribute for a select   tag  and still get the POST data    Just make it an input text field and add the  readonly  attribute to it  If the select is effectively  disabled   then you can t change the value anyway  so you don t need the select tag  and you can simply display the  selected  value as a readonly text input  For most UI purposes I think this should suffice

User · Answer

In addition to disabling the options that should not be selectable i wanted to actually make them dissapear from the list  but still be able to enable them should i need to later      select readonly    find  option not  selected    hide   attr  disabled  true     This finds all select elements with a readonly attribute  then finds all options inside those selects that are not selected  then it hides them and disables them   It is important to separate the jquery query in 2 for performance reasons  because jquery reads them from right to left  the code       select readonly  option not  selected      will first find all unselected options in the document and then filter those that are inside selects with a readonly attribute

User · Answer

input being your  lt select gt  element  input querySelectorAll   not  selected     forEach option   gt      option disabled   true     This will keep the select in the data  as it s not disabled  and only the option that are not selected are disabled  therefore not selectable  The result is a readable select that cannot be changed    gt  read only

User · Answer

select multiple does not respond nearly as well to the above code suggestions  With MUCH sledgehammering and kludging  I ended up with this   var thisId     var thisVal     function selectAll              thisId   option   each function            if    this  prop  disabled     this  prop  selected  true                     thisId  prop  disabled  false       document  ready function           select option not  selected    attr  disabled  true          select multiple    focus function            thisId   this  prop  id            thisVal   this  val              this  prop  disabled  true  blur            setTimeout  selectAll     200

User · Answer

One simple server-side approach is to remove all the options except the one that you want to be selected  Thus  in Zend Framework 1 12  if  element is a Zend Form Element Select     value     element- gt getValue      options    element- gt getAttrib  options      sole option   array  value   gt   options  value      element- gt setAttrib  options    sole option

User · Answer

lt select id  countries  onfocus  this defaultIndex this selectedIndex   onchange  this selectedIndex this defaultIndex   gt   lt option value  1  gt Country1 lt  option gt   lt option value  2  gt Country2 lt  option gt   lt option value  3  gt Country3 lt  option gt   lt option value  4  gt Country4 lt  option gt   lt option value  5  gt Country5 lt  option gt   lt option value  6  gt Country6 lt  option gt   lt option value  7  selected  selected  gt Country7 lt  option gt   lt option value  8  gt Country8 lt  option gt   lt option value  9  gt Country9 lt  option gt   lt  select gt    Tested and working in IE 6  7  amp  8b2  Firefox 2  amp  3  Opera 9 62  Safari 3 2 1 for Windows and Google Chrome

User · Answer

If you disable a form field  this won t be sent when form is submitted  So if you need a readonly that works like disabled but sending values do this   After any change in readonly properties of an element     select readonly option not  selected    attr  disabled  true       select not  readonly   option   removeAttr  disabled

User · Answer

Simply  remove the disabled attribute before submit the form          form   submit function                  Id Unidade   attr  disabled   false

User · Answer

A bit late to the party  But this seems to work flawlessly for me select readonly        pointer-events none

User · Answer

I know that it is far too late  but it can be done with simple CSS  select readonly  option  select readonly  optgroup       display  none     The style hides all the options and the groups when the select is in readonly state  so the user can not change his selection  No JavaScript hacks needed

User · Answer

One simple server-side approach is to remove all the options except the one that you want to be selected  Thus  in Zend Framework 1 12  if  element is a Zend Form Element Select     value     element- gt getValue      options    element- gt getAttrib  options      sole option   array  value   gt   options  value      element- gt setAttrib  options    sole option

User · Answer

If you are using jquery validate  you can do the following below  I used the disabled attribute without a problem     function            myform   validate           submitHandler function form                  select   removeAttr  disabled                form submit

User · Answer

lt select id  case reason  name  case reason  disabled  disabled  gt    disabled  disabled  - gt will get your value from database dan show it in the form  readonly  readonly  - gt you can change your value in selectbox  but your value couldn t save in your database

User · Answer

If the select dropdown is read-only since birth and does not need to change at all  perhaps you should use another control instead  Like a simple  lt div gt   plus hidden form field  or an  lt input type  text  gt    Added  If the dropdown is not read-only all the time and JavaScript is used to enable disable it  then this is still a solution - just modify the DOM on-the-fly

User · Answer

A bit late to the party  But this seems to work flawlessly for me select readonly        pointer-events none

User · Answer

So for whatever reason all jquery based solutions mentioned here did not work for me  So here is a pure javascript solution which should also preserve the selected value when doing a POST   setDropdownReadOnly  yourIdGoesHere  true false         function setDropdownReadOnly controlName  state            var ddl   document getElementById controlName            for  i   0  i  lt  ddl length  i                  if  i    ddl selectedIndex                  ddl i  disabled   false              else                 ddl i  disabled   state

User · Answer

Easier still  add the style attribute to your select tag   style  pointer-events  none

User · Answer

Simple jQuery solution  Use this if your selects have the readonly class  jQuery  select readonly option not  selected    attr  disabled  true     Or this if your selects have the readonly  readonly  attribute     select readonly  readonly   option not  selected    attr  disabled  true

User · Answer

lt select id  countries  onfocus  this defaultIndex this selectedIndex   onchange  this selectedIndex this defaultIndex   gt   lt option value  1  gt Country1 lt  option gt   lt option value  2  gt Country2 lt  option gt   lt option value  3  gt Country3 lt  option gt   lt option value  4  gt Country4 lt  option gt   lt option value  5  gt Country5 lt  option gt   lt option value  6  gt Country6 lt  option gt   lt option value  7  selected  selected  gt Country7 lt  option gt   lt option value  8  gt Country8 lt  option gt   lt option value  9  gt Country9 lt  option gt   lt  select gt    Tested and working in IE 6  7  amp  8b2  Firefox 2  amp  3  Opera 9 62  Safari 3 2 1 for Windows and Google Chrome

User · Answer

Rather than the select itself  you could disable all of the options except for the currently selected option   This gives the appearance of a working drop-down  but only the option you want passed in is a valid selection

User · Answer

Rather than the select itself  you could disable all of the options except for the currently selected option   This gives the appearance of a working drop-down  but only the option you want passed in is a valid selection

User · Answer

Had same problem and found very useful property of form - submitdisabledcontrols   Set that to True and disabled inputs are now POST

User · Answer

This is the simplest and best solution  You will set a readolny attr on your select  or anyother attr like data-readonly  and do the following     select readonly    live  focus mousedown mouseup click  function e       e preventDefault        e stopPropagation

User · Answer

So for whatever reason all jquery based solutions mentioned here did not work for me  So here is a pure javascript solution which should also preserve the selected value when doing a POST   setDropdownReadOnly  yourIdGoesHere  true false         function setDropdownReadOnly controlName  state            var ddl   document getElementById controlName            for  i   0  i  lt  ddl length  i                  if  i    ddl selectedIndex                  ddl i  disabled   false              else                 ddl i  disabled   state

User · Answer

I resolved it with jquery            select myselect   bind  focus   function            if   this  hasClass  readonly                          this  blur                 return

User · Answer

My solution is to add select readonly    pointer-events  none    style as many people here suggested  and then add this JS to handle keyboard events    document  on  keydown    select readonly    function e        if  e keyCode    9            if  e preventDefault                e preventDefault                       e returnValue   false          e cancel   true             This still allows traversing through the element with tab

User · Answer

Following on from Grant Wagners suggestion  here is a jQuery snippet that does it with handler functions instead of direct onXXX attributes   var readonlySelect   function selector  makeReadonly           selector  filter  select   each function i           var select     this              remove any existing readonly handler         if this readonlyFn  select unbind  change   this readonlyFn           if this readonlyIndex  this readonlyIndex   null           if makeReadonly                this readonlyIndex   this selectedIndex              this readonlyFn   function                    this selectedIndex   this readonlyIndex                             select bind  change   this readonlyFn

User · Answer

Here s an attempt to use a custom jQuery function to achieve the functionality  as mentioned here      function        prototype toggleDisable   function flag           prepare some values     var selectId     this  attr  id        var hiddenId   selectId    hidden       if  flag             disable the select - however this will not submit the value of the select          a new hidden form element will be created below to compensate for the           non-submitted select value          this  attr  disabled   true             gather attributes       var selectVal     this  val          var selectName     this  attr  name              creates a hidden form element to submit the value of the disabled select         this  parents  form   append     lt input gt  lt  input gt             attr  type    hidden            attr  id   hiddenId           attr  name   selectName           val selectVal           else            remove the newly-created hidden form element         this  parents  form   remove hiddenId            enable back the element         this  removeAttr  disabled                    Usage          some select element   toggleDisable true            some select element   toggleDisable false

User · Answer

In an option you can use disabled  disabled   instead of on the select itself

User · Answer

lt select id  case reason  name  case reason  disabled  disabled  gt    disabled  disabled  - gt will get your value from database dan show it in the form  readonly  readonly  - gt you can change your value in selectbox  but your value couldn t save in your database

User · Answer

Following on from Grant Wagners suggestion  here is a jQuery snippet that does it with handler functions instead of direct onXXX attributes   var readonlySelect   function selector  makeReadonly           selector  filter  select   each function i           var select     this              remove any existing readonly handler         if this readonlyFn  select unbind  change   this readonlyFn           if this readonlyIndex  this readonlyIndex   null           if makeReadonly                this readonlyIndex   this selectedIndex              this readonlyFn   function                    this selectedIndex   this readonlyIndex                             select bind  change   this readonlyFn

User · Answer

I know that it is far too late  but it can be done with simple CSS  select readonly  option  select readonly  optgroup       display  none     The style hides all the options and the groups when the select is in readonly state  so the user can not change his selection  No JavaScript hacks needed

User · Answer

If the select dropdown is read-only since birth and does not need to change at all  perhaps you should use another control instead  Like a simple  lt div gt   plus hidden form field  or an  lt input type  text  gt    Added  If the dropdown is not read-only all the time and JavaScript is used to enable disable it  then this is still a solution - just modify the DOM on-the-fly

[javascript] HTML form readonly SELECT tag/input

Examples related to javascript

Examples related to html