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

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

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


当前回答

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

其他回答

如果你正在使用jquery验证,你可以做下面的事情,我使用disabled属性没有问题:

$(function(){
    $('#myform').validate({
        submitHandler:function(form){
            $('select').removeAttr('disabled');
            form.submit();
        }
    });
});

简单jQuery解决方案

如果你选择的是只读类,使用这个选项

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

或者如果你的选择有readonly="readonly"属性

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

有点晚了。但这对我来说似乎完美无缺

select[readonly] {
    pointer-events:none;
}

我知道这已经太迟了,但它可以用简单的CSS完成:

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

当选择处于只读状态时,样式会隐藏所有选项和组,因此用户不能更改他的选择。

不需要JavaScript技巧。

一种简单的服务器端方法是删除所有选项,只删除希望被选中的选项。因此,在Zend Framework 1.12中,如果$element是一个Zend_Form_Element_Select:

 $value =  $element->getValue();
 $options = $element->getAttrib('options');
 $sole_option = array($value => $options[$value]);
 $element->setAttrib('options', $sole_option);