当前位置: 代码迷 >> Web前端 >> IE中Option的disabled无效 Select只读形式
  详细解决方案

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

热度:418   发布时间:2012-10-28 09:54:44.0
IE中Option的disabled无效 Select只读模式
给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.csdn.net/fableking/archive/2008/01/31/2075881.aspx
1 楼 gladto 2010-10-16  
optgroup第一次见
好东西~
  相关解决方案