在开发web程序的时候,我需要将页面下拉框<select>的某个选项<option>给关闭掉,即用户可以看到但是不能选择这个选项,我们可以这样做:
<
select
>
< option value ="volvo" > Volvo </ option >
< option value ="saab" > Saab </ option >
< option value ="mercedes" disabled > Mercedes </ option >
< option value ="audi" > Audi </ option >
</ select >
< option value ="volvo" > Volvo </ option >
< option value ="saab" > Saab </ option >
< option value ="mercedes" disabled > Mercedes </ option >
< option value ="audi" > Audi </ option >
</ select >
即通过"disabled"可以让选项处于关闭状态,用户不能选择。但是头疼的问题来了,IE7以上版本支持,在IE6下,"disabled"是不起作用的,有一个解决方案Select, Option, Disabled And The JavaScript Solution 是通过javascript模拟关闭状态,效果不错。
select-option-disabled-emulation.js 文件如下:
/*
***************************************************************
* Author: Alistair Lattimore
* Website: http://www.lattimore.id.au/
* Contact: http://www.lattimore.id.au/contact/
* Errors, suggestions or comments
* Date: 30 June 2005
* Version: 1.0
* Purpose: Emulate the disabled attributte for the <option>
* element in Internet Explorer.
* Use: You are free to use this script in non-commercial
* applications. You are however required to leave
* this comment at the top of this file.
*
* I'd love an email if you find a use for it on your
* site, though not required.
*************************************************************** */
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 " ;
}
}
}
* Author: Alistair Lattimore
* Website: http://www.lattimore.id.au/
* Contact: http://www.lattimore.id.au/contact/
* Errors, suggestions or comments
* Date: 30 June 2005
* Version: 1.0
* Purpose: Emulate the disabled attributte for the <option>
* element in Internet Explorer.
* Use: You are free to use this script in non-commercial
* applications. You are however required to leave
* this comment at the top of this file.
*
* I'd love an email if you find a use for it on your
* site, though not required.
*************************************************************** */
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 " ;
}
}
}
然后再HTML页面上增加下面的代码
<!--
[if lt IE 7]>
<script type="text/javascript" src="select-option-disabled-emulation.js"></script>
<![endif] -->
<script type="text/javascript" src="select-option-disabled-emulation.js"></script>
<![endif] -->
在IE6下我们看到,被"disabled"的选项处于关闭状态,用户选择后会自动恢复到前一个状态项。