IE不支持option的display样式，只能使用remove和add- Javascript

当前位置: 首页 > 图文教程 > 网络编程 > Javascript > IE不支持option的display样式，只能使用remove和add

Javascript: 关于setEndPoint msdn给出的参考; 一个不用onmouseup的拖动函数; 实现163邮箱的图标功能; javascript 也来玩玩图片预加载; 又一个小巧的图片预加载类; 使用正则替换变量; JS统计Flash被网友点击过的代码; JS脚本混淆、加密讨论; 通过Unicode转义序列来加密,按你说的可以算是混淆吧; javascript之ESC(第二类混淆); 另一种希望别人无法修改js的代码; javascript又一解密过程,推荐的，会这个基本上好多都能解决了; ESC之ESC.wsf可以实现javascript的代码压缩附使用方法; javascript支持区号输入的省市二级联动下拉菜单; 一个不错的渐显菜单; javascript之水平横向滚动歌词同步的应用; javascript实现表现、结构、行为分离的选项卡效果！; [全兼容哦]--实用、简洁、炫酷的页面转入效果loing; 用js判断浏览器是否是IE的比较好的办法; 延时重复执行函数 lLoopRun.js

No. « ‹ 65 66 67 68 › »

技术文章搜索

关键字

Javascript 中的 IE不支持option的display样式，只能使用remove和add

出处:互联网 整理: 软晨网（RuanChen.com） 发布: 2010-01-10 浏览: 382 ::

收藏到网摘: n/a

讨论javascript(一)工厂方式 js面象对象的定义方法多浏览器兼容的获取元素和鼠标的位置的js代码

想实现一个很简单的功能：当选中“中介”时，不显示“求购”与“求租”。本以为通过display:none即可实现，结果发现在option元素上使用display:none在firefox中有效，在IE6、IE7、IE8中都无效。

[Ctrl+A 全选提示:你可先修改部分代码,再按运行]

所以，通过javascript设置display:none也是在IE中无效，代码如下：

<!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" xml:lang="yue-Hans" lang="yue-Hans">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gbk" />
<title>it works..............</title>
</head>
<body>
<form action="./" method="get">
<dl>
<dt>发布者</dt>
<dd>
<select name="q_role" onchange="role_change_type();">
<option value="company">中介</option>
<option value="person">个人</option>
</select>
<select name="q_type">
<option value="sale">出售</option>
<option value="lease">出租</option>
<option value="buy">求购</option>
<option value="hire">求租</option>
</select>
</dd>
</dl>
<script type="text/javascript">
function role_change_type()
{
var q_role=document.getElementsByName("q_role");
var q_type=document.getElementsByName("q_type");
var q_type_option=q_type[0].getElementsByTagName("option");
if(q_role[0].value=='company')
{
if(q_type[0].value=='buy'||q_type[0].value=='hire')
{
q_type[0].value='sale';
}
for(var i=0;i!=q_type_option.length;i++)
{
if(q_type_option[i].value=="buy"||q_type_option[i].value=="hire")
{
q_type_option[i].style.display="none";
}
}
}
if(q_role[0].value=='person')
{
for(var i=0;i!=q_type_option.length;i++)
{
q_type_option[i].style.display="";
}
}
}
role_change_type();
</script>
</form>
</body>
</html>

[Ctrl+A 全选提示:你可先修改部分代码,再按运行]

所以，只能通过select元素的remove和add方法，当选中“中介” 时，把“求租”和“求购”删除。代码如下：

<!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" xml:lang="yue-Hans" lang="yue-Hans">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gbk" />
<title>it works..............</title>
</head>
<body>
<form action="./" method="get">
<dl>
<dt>发布者</dt>
<dd>
<select name="q_role" onchange="role_change_type();">
<option value="company">中介</option>
<option value="person">个人</option>
</select>
<select name="q_type">
<option value="sale">出售</option>
<option value="lease">出租</option>
<option value="buy">求购</option>
<option value="hire">求租</option>
</select>
</dd>
</dl>
<script type="text/javascript">
var q_role=document.getElementsByName("q_role");
var q_type=document.getElementsByName("q_type");
var q_type_option=q_type[0].getElementsByTagName("option");
alert(q_role[0].value)
if(q_role[0].value=='company')
{
q_type[0].remove(3)
q_type[0].remove(2)
}
function role_change_type()
{
if(q_role[0].value=='company')
{
q_type[0].remove(3)
q_type[0].remove(2)
}
if(q_role[0].value=='person')
{
var x=document.createElement('option');
x.text='求购';
x.value='buy';
var y=document.createElement('option');
y.text='求租';
y.value='hire';
try
{
q_type[0].add(x,null);
q_type[0].add(y,null); // standards compliant
}
catch(ex)
{
q_type[0].add(x);
q_type[0].add(y); // IE only
}
}
}
</script>
</form>
</body>
</html>

[Ctrl+A 全选提示:你可先修改部分代码,再按运行]

这样在IE和firefox中都有效了。真费解啊，IE8竟然还不支持option的display:none 。
上面的代码还有一个问题：在IE7和IE8中选中“个人”，然后刷新，将导致“求租”和“求购”被删除。在IE6和firefox3.5.5中正常。

讨论javascript(一)工厂方式 js面象对象的定义方法多浏览器兼容的获取元素和鼠标的位置的js代码

Javascript 中的 IE不支持option的display样式，只能使用remove和add

评论 (0) All