我们还可以禁用除所选选项之外的所有选项。

这样，下拉菜单仍然可以工作(并提交其值)，但用户不能选择其他值。

Demo

<选择> <选项禁用> 1 > < /选项 <选项> 2 > < /选项 <选项禁用> 3 < /选项> < /选择>

如果你禁用了一个表单字段，当表单被提交时，这将不会被发送。 所以如果你需要一个像disabled一样工作但发送值的readonly，可以这样做:

在元素的只读属性发生任何变化之后。

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

$('select:not([readonly]) option').removeAttr('disabled');

(简单的解决方案)

由于OP特别要求他不想禁用select元素，下面是我用来使select变为只读的方法

在html中

<select style="pointer-events: none;" onclick="return false;" onkeydown="return false;" ></select>

就是这样

解释

将pointer-events设置为none将禁用使用鼠标/光标事件编辑“select-element” 设置onclick和onkeydown函数返回false将禁用使用键盘编辑“select-element”

通过这种方式，您不必创建任何额外的元素，或使用javascript禁用/重新启用元素，或打乱表单提交逻辑，或使用任何第三方库。

此外，您可以轻松地添加css样式，如设置背景颜色为灰色或文本颜色为灰色，以暗示该元素是只读的。我没有将它添加到代码中，因为它非常特定于您的站点主题

或者你想通过javascript来实现

let isReadOnly = true; selectElement。Onclick = function () { isReadOnly; }; selectElement。onkeydown = function () { isReadOnly; }; selectElement.style.pointerEvents = isReadOnly ?“none”:“全部”;

<select id="case_reason" name="case_reason" disabled="disabled">

Disabled =" Disabled " ->将从数据库中获取你的值，但在表单中显示它。 Readonly =" Readonly " ->你可以在选择框中更改你的值，但你的值不能保存在你的数据库中。

摘自https://stackoverflow.com/a/71086058/18183749

如果你不能使用'disabled'属性(因为它会擦除值的 input at POST)，并注意到html属性'readonly'只工作 在文本区域和一些输入(文本，密码，搜索，据我所见)， 最后，如果你不想重复你所有的 您可能会发现，带有隐藏输入逻辑的选择、复选框和单选 下面的函数或任何他的内部逻辑你喜欢:

addReadOnlyToFormElements = function (idElement) {
    
        // html readonly don't work on input of type checkbox and radio, neither on select. So, a safe trick is to disable the non-selected items
        $('#' + idElement + ' select>option:not([selected])').prop('disabled',true);
    
        // and, on the selected ones, to mimic readOnly appearance
        $('#' + idElement + ' select').css('background-color','#eee');
    }

没有什么比删除这些只读更容易的了

removeReadOnlyFromFormElements = function (idElement) {

    // Remove the disabled attribut on non-selected 
    $('#' + idElement + ' select>option:not([selected])').prop('disabled',false);

    // Remove readOnly appearance on selected ones
    $('#' + idElement + ' select').css('background-color','');
}

输入为<select>元素:

input.querySelectorAll(':not([selected])').forEach(option => {
  option.disabled = true
})

这将保留数据中的选择(因为它没有被禁用)，并且只有未被选中的选项是禁用的，因此是不可选的。 结果是一个不可更改的可读选择(=>只读)。