Readonly listbox in html without disabling [duplicate]

Why don't you keep this disabled and add a <input type="hidden"> with the information you need to be posted?

Obviously this wasn't very clear so:

<script>

    var selectVal = $("#select_user > option[selected]").val();

    $("#select_post").val(selectVal);

</script>

<select disabled id="select_user">
    <option>Option 1</option>
    <option selected>Option 2</option>
    <option>Option 3</option>
</select>

<input type="hidden" name="select_post" id="select_post">

Now the user can see the select, but the value is replicated in the hidden input and then sent to the action file. Thankfully, since the select never changes, you don't have to do anything with .change()

There is no readonly attribute available for the element and disabling the field was not an option since we needed the value on the serverside. Some simple javascript did the job:

You can try this script

<select size=4 multiple="multiple" onchange="this.selectedIndex = 1">
  <option selected="selected">Volvo</option>
  <option selected="selected">Saab</option>
  <option  selected="selected">Mercedes</option>
  <option  selected="selected">Audi</option>
</select>

This will only do the job if you meant that the user should be able to see all values in the list and not be able to select a new value.

Demo

As far as I know, readonly doesn't exist for select boxes.

As for best practice, if you don't need the data to be changed, you shouldn't make it a form element. If you only make it a form element in order to get a certain display, use CSS to make it LOOK like a form element.

Plus, if data shouldn't be changed, it's safer not to send it with a form. Javascript can be disabled easily.

CSS

ul.fake_select{
        list-style-type:none;
        color:#000000;
        overflow-y:scroll;
        width:100px;
        height:auto;  /* If you have lots of options, put a fixed value */
        padding:0;
}
ul.fake_select li{
        margin:0;
        background:#3399FF;
        color:#FFFFFF;
}

HTML

<ul class="fake_select">
    <li>Volvo</li>
    <li>Saab</li>
    <li>Mercedes</li>
    <li>Audo</li>
</ul>

   <select size=4 multiple="multiple" onchange="this.selectedIndex=this.defaultIndex;">
  <option selected="selected">Volvo</option>
  <option selected="selected" >Saab</option>
  <option  selected="selected" >Mercedes</option>
  <option  selected="selected" >Audi</option>
</select>

Demo :-

http://jsfiddle.net/2gmKY/2/