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

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

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


当前回答

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

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);
    });
});

其他回答

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

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);
    });
});

如果您有一个应该是只读的选择标记,那么从逻辑上讲,您必须将选择框转换为单个“文本”字段。

我说逻辑是因为它就像: "我必须向用户显示一个值"

无论该值是否来自选择标记,都仍然是单个值且不能更改(只读)。

因此,从逻辑上讲,只有在第一次插入值时才使用选择标记。

然后,当你需要显示这个值时,你必须把它放在“文本字段只读”上。

如果多选项为只读,则变成一个值列表(所选值)

我使用“text”是因为一个只读标记不需要“type”属性。 干杯

您可以禁用除当前选中的选项以外的所有选项,而不是选择本身。这提供了一个工作的下拉菜单的外观,但只有您想要传递的选项是有效的选择。

我通过隐藏选择框并在其位置显示一个只有信息值的span来管理它。在禁用.readonly类的事件中,我们还需要删除. tovanish元素并显示. toshow元素。

 $( '.readonly' ).live( 'focus', function(e) {
                $( this ).attr( 'readonly', 'readonly' )
                if( $( this ).get(0).tagName == 'SELECT' ) {
                    $( this ).before( '<span class="toVanish readonly" style="border:1px solid; padding:5px">' 
                            + $( this ).find( 'option:selected' ).html() + '</span>' )
                    $( this ).addClass( 'toShow' )
                    $( this ).hide()
            }
    });

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

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

jQuery示例:

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

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

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