IE中Option的disabled无效 Select只读模式

最新推荐文章于 2024-06-17 11:23:01 发布

welody

最新推荐文章于 2024-06-17 11:23:01 发布

阅读量412

点赞数 1

CC 4.0 BY-SA版权

分类专栏： JavaScript 文章标签： IE Java Web .net Blog

本文链接：https://blog.youkuaiyun.com/welody/article/details/83728067

JavaScript 专栏收录该内容

3 篇文章

订阅专栏

本文介绍在Internet Explorer浏览器中实现Select下拉框禁用功能的方法。通过JavaScript代码实现禁用效果，包括设置disabled属性、默认值及使用optgroup元素等方案。

给IE下的option项添加disabled的禁用功能


window.onload = function() {
    if (document.getElementsByTagName){
        var s = document.getElementsByTagName("select");
        if (s.length > 0){
            window.select_current = new Array();
            for (var i=0, select; select = s[i]; i++){
                select.onfocus = function(){
                    window.select_current[this.id] = this.selectedIndex;
                }
                select.onchange = function(){
                    restore(this);
                }
                emulate(select);
            }
        }
    }
}

function restore(e){
    if (e.options[e.selectedIndex].disabled){
        e.selectedIndex = window.select_current[e.id];
    }
}

function emulate(e){
    for (var i=0, option; option = e.options[i]; i++){
        if (option.disabled){
            option.style.color = "graytext";
        }else{
            option.style.color = "menutext";
        }
    }
}

select只读模式
1.disabled：方便，但在表单提交时无法获得值


<select name="" disabled="disabled">
<option>哎，禁用了啊。</option>
<option>没用的选项。</option>
</select>

2.给出默认值，改变选项时自动变回默认选项


<select name="select" onchange="selectedIndex=0">
<option>abc</option>
<option>def</option>
</select>

3.使用optgroup元素


<select>
<option selected>下面两项只能看看啊</option>
<optgroup label="看看一">
</optgroup>
<optgroup label="看看二，哈哈">
</optgroup>
</select>

参考内容：
1.http://www.cainiao8.com/web/js_blueidea/32_readonly_select.html
2.http://blog.youkuaiyun.com/fableking/archive/2008/01/31/2075881.aspx