您的位置：首页 > Web前端 > JQuery

使用jQuery解决IE不支持的option disable属性

2009-05-19 09:08 507 查看
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<title> 使用jQuery解决IE不支持的option disable属性 </title>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<script src="http://jqueryjs.googlecode.com/files/jquery-1.3.2.min.js" type="text/javascript"></script>

<script>

$(document).ready(function(){

$(".myselect option:disabled").css('color', '#CCC');

$('.myselect').change(function(){

if(this[this.selectedIndex].disabled){

this.selectedIndex = this.s||0;

}else{

this.s = this.selectedIndex||0;

}

})

})

</script>

</head>

<body>

<h1>使用jQuery解决IE不支持的option disable属性</h1>

普通：

<select>

<option>第1项</option>

<option disabled="disabled">第2项</option>

<option>第3项</option>

<option disabled="disabled">第4项</option>

<option >第5项</option>

<option >第6项</option>

</select>

对比1：

<select class="myselect">

<option>第1项</option>

<option disabled="disabled">第2项</option>

<option>第3项</option>

<option disabled="disabled">第4项</option>

<option >第5项</option>

<option >第6项</option>

</select>

对比2：

<select class="myselect">

<option>第1项</option>

<option disabled="disabled">第2项</option>

<option>第3项</option>

<option disabled="disabled">第4项</option>

<option >第5项</option>

<option >第6项</option>

</select>

<p style="margin-top:200px;font-size:12px;">Dev By <a href="http://www.cssrain.cn" >CssRain.cn</a>，当然你有兴趣，也可以封装成插件。记得发我一份哦。</p>

</body>

</html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航