<select id="countries" onfocus="this.defaultIndex=this.selectedIndex;" onchange="this.selectedIndex=this.defaultIndex;">
<option value="1">Country1</option>
<option value="2">Country2</option>
<option value="3">Country3</option>
<option value="4">Country4</option>
<option value="5">Country5</option>
<option value="6">Country6</option>
<option value="7" selected="selected">Country7</option>
<option value="8">Country8</option>
<option value="9">Country9</option>
</select>

测试和工作在IE 6, 7和8b2, Firefox 2和3,Opera 9.62, Safari 3.2.1 for Windows和谷歌Chrome。

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

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

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

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

输入为<select>元素:

input.querySelectorAll(':not([selected])').forEach(option => {
  option.disabled = true
})

这将保留数据中的选择(因为它没有被禁用)，并且只有未被选中的选项是禁用的，因此是不可选的。 结果是一个不可更改的可读选择(=>只读)。

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

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

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

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

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

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

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

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

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