根据HTML规范,HTML中的select标签没有readonly属性,只有disabled属性。所以如果你想让用户不改变下拉菜单,你必须使用disabled。

唯一的问题是禁用的HTML表单输入不会包含在POST / get数据中。

什么是最好的方法来模拟一个选择标签的只读属性,仍然得到POST数据?


当前回答

非常简单。首先将值存储在变量中。然后将事件集的值更改为存储的变量,该变量包含的初始值

我有一个名字是映射的。那么我的代码将如下所示;

$("document").ready(function(){ 
    var mapping=$("select[name=mapping]").val();
    $("select[name=mapping]").change(function(){
        $("select[name=mapping]").val(mapping);
    });
});

其他回答

摘自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','');
}

这是我找到的最好的解决方案:

$("#YourSELECTIdHere option:not(:selected)").prop("disabled", true);

上面的代码禁用所有其他未选中的选项,同时启用所选选项。这样做,所选选项将使其成为回发数据。

给select元素添加readOnly属性的另一种方法是使用css

你可以这样做:

$('#selection').css('pointer-events','none');

DEMO

这个javascript找到所有的'select'与'readonly'属性,然后把disabled在'options'除了selected(回发)

文档。querySelectorAll("select[readonly] > option:not([selected])")。forEach((el) => el。setAttribute("disabled", "disabled")); 不带readonly: <select> <选项> 1 > < /选项 <选项> 2 > < /选项 <选项> 3 < /选项> < /选择> < br > 带readonly: <select readonly="readonly"> <选项> 1 > < /选项 <选项> 2 > < /选项 <选项> 3 < /选项> < /选择>

您可以在提交时重新启用选择对象。

EDIT:也就是说,通常禁用select标签(带有disabled属性),然后在提交表单之前自动重新启用它:

jQuery示例:

禁用: $ (" # yourSelect”)。道具(“禁用”,真正的); 在提交前重新启用GET / POST数据: $ (" # yourForm”)。On ('submit', function() { $ (" # yourSelect”)。道具(“禁用”,假); });

此外,您可以重新启用每个禁用的输入或选择:

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