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

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

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


当前回答

如果选择下拉菜单自诞生以来是只读的,根本不需要更改,也许您应该使用另一个控件?比如一个简单的<div>(加上隐藏的表单字段)或一个<input type="text">?

补充:如果下拉菜单不是一直都是只读的,并且JavaScript被用来启用/禁用它,那么这仍然是一个解决方案——只需要动态修改DOM。

其他回答

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

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

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

如果选择下拉菜单自诞生以来是只读的,根本不需要更改,也许您应该使用另一个控件?比如一个简单的<div>(加上隐藏的表单字段)或一个<input type="text">?

补充:如果下拉菜单不是一直都是只读的,并且JavaScript被用来启用/禁用它,那么这仍然是一个解决方案——只需要动态修改DOM。

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

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

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

我的解决方案是添加select[readonly] {pointer-events: none;}样式,然后添加这个JS来处理键盘事件:

$(document).on('keydown', 'select[readonly]', function(e) {
    if (e.keyCode != 9) {
        if (e.preventDefault) {
            e.preventDefault();
        }

        e.returnValue = false;
        e.cancel = true;
    }
});

这仍然允许遍历带有tab的元素。

这个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 < /选项> < /选择>