HTML-форма: атрибут readonly для тега SELECT/Input

Вы можете оставить элемент select отключенным (disabled), но также добавьте еще одно скрытое поле input с тем же именем и значением.

Если вы снова активируете ваш select, вам нужно скопировать его значение в скрытое поле в событии onchange и отключить (или удалить) скрытое поле.

Вот пример:

$('#mainform').submit(function() {
    $('#formdata_container').show();
    $('#formdata').html($(this).serialize());
    return false;
});

$('#enableselect').click(function() {
    $('#mainform input[name=animal]')
        .attr("disabled", true);

    $('#animal-select')
        .attr('disabled', false)
        .attr('name', 'animal');
        
    $('#enableselect').hide();
    return false;
});

#formdata_container {
    padding: 10px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
    <form id="mainform">
        <select id="animal-select" disabled="true">
            <option value="cat" selected>Cat</option>
            <option value="dog">Dog</option>
            <option value="hamster">Hamster</option>
        </select>
        <input type="hidden" name="animal" value="cat"/>
        <button id="enableselect">Enable</button>
        
        <select name="color">
            <option value="blue" selected>Blue</option>
            <option value="green">Green</option>
            <option value="red">Red</option>
        </select>

        <input type="submit"/>
    </form>
</div>

<div id="formdata_container" style="display:none">
    <div>Submitted data:</div>
    <div id="formdata">
    </div>
</div>

Таким образом, при отправке формы вы сможете корректно обрабатывать значение из скрытого поля, даже если select остается отключенным до момента, когда пользователь решит его активировать.

Вы можете снова активировать элемент <select> перед отправкой формы.

Редактирование: т.е. обычно вы отключаете элемент <select> (с помощью атрибута disabled), а затем автоматически снова включаете его непосредственно перед отправкой формы.

Пример с использованием jQuery:

• Чтобы отключить его:

  $('#yourSelect').prop('disabled', true);
  

• Чтобы снова включить его перед отправкой, чтобы данные GET / POST были включены:

  $('#yourForm').on('submit', function() {
      $('#yourSelect').prop('disabled', false);
  });
  

Кроме того, вы можете снова включить все отключенные элементы input или select:

$('#yourForm').on('submit', function() {
    $('input, select').prop('disabled', false);
});

Я понимаю, что ответ уже запоздал, но это можно сделать с помощью простого CSS:

select[readonly] option, select[readonly] optgroup {
    display: none;
}

Данный стиль скрывает все опции и группы, когда select находится в состоянии readonly, таким образом, пользователь не сможет изменить свой выбор.

Для дополнительной безопасности и предотвращения нажатий клавиш, стоит рассмотреть возможность добавления атрибута disabled ко всем option и optgroup, кроме выбранного значения.

Вам подойдет следующее решение на jQuery, если ваши <select> элементы имеют класс readonly:

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

Если же у ваших <select> элементов есть атрибут readonly="readonly", используйте вот этот код:

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

Это простой способ сделать невыбранные опции недоступными для взаимодействия.

Вы можете использовать следующий код HTML для создания списка выбора с сохранением значения по умолчанию. При потере фокуса на выпадающем списке будет восстановлено предыдущее значение. Вот как это можно реализовать:

<select id="countries" onfocus="this.defaultIndex=this.selectedIndex;" onchange="this.selectedIndex=this.defaultIndex;">
    <option value="1">Country1</option>
    <option value="2">Country2</option>
    <option value="3">Country3</option>
    <option value="4">Country4</option>
    <option value="5">Country5</option>
    <option value="6">Country6</option>
    <option value="7" selected="selected">Country7</option>
    <option value="8">Country8</option>
    <option value="9">Country9</option>
</select>

Код протестирован и работает в Internet Explorer 6, 7 и 8b2, а также в Firefox 2 и 3, Opera 9.62, Safari 3.2.1 для Windows и Google Chrome.

Если вам нужно поддерживать выбор по умолчанию в разных браузерах, данный подход будет хорошим решением. Однако стоит помнить, что использование события onchange может немного отличаться в зависимости от конкретного браузера, поэтому всегда полезно тестировать на всех целевых платформах.