According to the HTML specification, the select tag in HTML has no readonly attribute, only the disabled attribute. Therefore, if you want to prevent users from changing the drop-down menu, you must use disabled.

The only problem is that disabled HTML form input is not included in POST / GET data.

What is the best way to simulate the readonly property of the select tag and still get POST data?

#1 building

Simple jQuery solution

Use this option if your selection has a readonly class

jQuery('select.readonly option:not(:selected)').attr('disabled',true);

If your selection has a readonly="readonly" attribute, this attribute

$('select[readonly="readonly"] option:not(:selected)').attr('disabled',true);

#2 building

This is an attempt to use a custom jQuery function to implement the function (described 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($('<input></input>').
        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);

});

#3 building

If you are using jquery validate, you can do the following, I have no problem using the disable attribute:

$(function(){
    $('#myform').validate({
        submitHandler:function(form){
            $('select').removeAttr('disabled');
            form.submit();
        }
    });
});

#4 building

A simple server-side approach is to remove all options except those you want to select. Therefore, in Zend Framework 1.12, if $element is Zend_Form_Element_Select:

 $value =  $element->getValue();
 $options = $element->getAttrib('options');
 $sole_option = array($value => $options[$value]);
 $element->setAttrib('options', $sole_option);

#5 building

In addition to disabling options that should not be selected, I want them to disappear from the list, but I can still enable them for later use:

$("select[readonly]").find("option:not(:selected)").hide().attr("disabled",true);

This finds all selection elements and read-only attributes, then all options within those selections that are not selected, then hides them and disables them.

It is separated in 2. For performance reasons, jQuery queries are read from right to left. The code is very important:

$("select[readonly] option:not(:selected)")

All unselected options in the document will be found first, and then all unselected options in the select will be filtered using the read-only property.