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

你可以这样做:

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

DEMO

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

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

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

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

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

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

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

除了禁用不应该是可选的选项，我想实际上让他们从列表中消失，但仍然能够启用他们，我应该以后需要:

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

它会找到所有带有只读属性的select元素，然后找到那些未被选中的select元素中的所有选项，然后隐藏它们并禁用它们。

出于性能考虑，将jquery查询分为2是很重要的，因为jquery从右向左读取它们，代码如下:

$("select[readonly] option:not(:selected)")

将首先找到文档中所有未选中的选项，然后筛选那些在具有只读属性的选择内的选项。

html的解决方案:

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

javascript的:

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

删除:

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

编辑:增加删除方法

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

我通过隐藏选择框并在其位置显示一个只有信息值的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()
            }
    });