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

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

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


当前回答

我用jquery解决了它:

      $("select.myselect").bind("focus", function(){
        if($(this).hasClass('readonly'))
        {
          $(this).blur();   
          return;
        }
      });

其他回答

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

你可以这样做:

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

DEMO

html的解决方案:

<选择聚焦事件= " this.blur ();" >

javascript的:

selectElement。addEventListener(“焦点”,selectElement。模糊,真正的); selectElement。attachEvent(“焦点”,selectElement.blur);/ /谢谢,IE

删除:

selectElement。removeEventListener(“焦点”,selectElement。模糊,真正的); selectElement.detachEvent(“焦点”,selectElement.blur);/ /谢谢,IE

编辑:增加删除方法

“选择多个”对上述代码建议的响应几乎没有那么好。经过大量的推敲和拼凑,我最终得到了这个:

var thisId="";
var thisVal="";
function selectAll(){
    $("#"+thisId+" option").each(function(){
        if(!$(this).prop("disabled"))$(this).prop("selected",true);
    });
    $("#"+thisId).prop("disabled",false);
}
$(document).ready(function(){
    $("select option:not(:selected)").attr('disabled',true);
    $("select[multiple]").focus(function(){
        thisId=$(this).prop("id");
        thisVal=$(this).val();
        $(this).prop("disabled",true).blur();
        setTimeout("selectAll();",200);
    });
});

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

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

$("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','');
}