HTML表单只读SELECT标记/输入

在IE中，我可以通过双击来击败onfocus => onblur方法。但是记住该值，然后在onchange事件中将其还原似乎可以解决该问题。

<select onfocus="this.oldvalue=this.value;this.blur();" onchange="this.value=this.oldvalue;">
....
</select>

您可以使用javascript变量在没有expando属性的情况下进行类似的操作。

如果选择下拉列表自出生以来是只读的，并且根本不需要更改，那么也许应该改用另一个控件？就像一个简单的<div>（加上隐藏的表单字段）还是一个<input type="text">？

补充：如果下拉列表并非始终都是只读的，并且使用JavaScript启用/禁用它，那么这仍然是解决方案-只需即时修改DOM。

html解决方案：

<select onfocus="this.blur();">

JavaScript的：

selectElement.addEventListener("focus", selectElement.blur, true); selectElement.attachEvent("focus", selectElement.blur); //thanks, IE

去除：

selectElement.removeEventListener("focus", selectElement.blur, true); selectElement.detachEvent("focus", selectElement.blur); //thanks, IE

编辑：添加了删除方法

除了当前选择的选项之外，您还可以禁用所有选项，而不是选择本身。这样会显示一个有效的下拉菜单，但是只有要传递的选项才是有效的选择。

<select id="case_reason" name="case_reason" disabled="disabled">

disabled="disabled" ->将从数据库中获取您的价值，并在表单中显示它。 readonly="readonly" ->您可以在选择框中更改您的值，但是您的值无法保存在数据库中。

遵循Grant Wagners的建议；这是一个使用处理程序函数（而不是直接的onXXX属性）执行的jQuery代码段：

var readonlySelect = function(selector, makeReadonly) {

    $(selector).filter("select").each(function(i){
        var select = $(this);

        //remove any existing readonly handler
        if(this.readonlyFn) select.unbind("change", this.readonlyFn);
        if(this.readonlyIndex) this.readonlyIndex = null;

        if(makeReadonly) {
            this.readonlyIndex = this.selectedIndex;
            this.readonlyFn = function(){
                this.selectedIndex = this.readonlyIndex;
            };
            select.bind("change", this.readonlyFn);
        }
    });

};

tabindex解决方案。适用于选择，但也适用于文本输入。

只需使用.disabled类。

CSS：

.disabled {
    pointer-events:none; /* No cursor */
    background-color: #eee; /* Gray background */
}

JS：

$(".disabled").attr("tabindex", "-1");

HTML：

<select class="disabled">
    <option value="0">0</option>
</select>

<input type="text" class="disabled" />

编辑：使用Internet Explorer，您还需要以下JS：

$(document).on("mousedown", ".disabled", function (e) {
    e.preventDefault();
});

我知道这为时已晚，但是可以使用简单的CSS来完成：

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

当选择处于readonly状态时，样式将隐藏所有选项和组，因此用户无法更改其选择。

无需JavaScript技巧。

这是最简单，最好的解决方案。您将在选择的内容上设置一个readolny attr或任何其他attr，例如data-readonly，然后执行以下操作

$("select[readonly]").live("focus mousedown mouseup click",function(e){
    e.preventDefault();
    e.stopPropagation();
});

除了禁用不应选择的选项外，我还想使它们从列表中消失，但仍可以启用它们，以备以后使用：

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

这将找到具有只读属性的所有选择元素，然后在那些未选择的选择内找到所有选项，然后将其隐藏并禁用它们。

出于性能原因，将jquery查询分成2个很重要，因为jquery从右到左读取它们，代码如下：

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

将首先在文档中找到所有未选择的选项，然后使用只读属性过滤select内的所有未选择选项。

简单的CSS解决方案：

select[readonly]{
    background: #eee;
    cursor:no-drop;
}

select[readonly] option{
    display:none;
}

这样会导致“选择”显示为灰色，
并在鼠标悬停时显示漂亮的“禁用”光标，并且在选择时，选项列表为“空”，因此您无法更改其值。

更简单：将style属性添加到您的select标签中：

style="pointer-events: none;"

另一个更现代的选项（不是双关语）是禁用select元素（而不是所选元素）的所有选项。

但是请注意，这是HTML 4.0功能，即6,7,8 beta 1似乎不尊重这一点。

http://www.gtalbot.org/BrowserBugsSection/MSIE7Bugs/OptionDisabledSupport.html

这是我发现的最佳解决方案：

$("#YourSELECTIdHere option:not(:selected)").prop("disabled", true);

上面的代码禁用所有其他未选中的选项，同时保持选中的选项处于启用状态。这样做，选定的选项会将其纳入回发数据中。

<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，适用于Windows的Safari 3.2.1和Google Chrome中运行。

我们也可以用这个

禁用除选定选项之外的所有选项：

<select>
    <option disabled>1</option>
    <option selected>2</option>
    <option disabled>3</option>
</select>

这样，下拉列表仍然有效（并提交其值），但用户无法选择其他值。

演示版