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

最新推荐文章于 2020-12-04 14:08:31 发布

途有徐名

最新推荐文章于 2020-12-04 14:08:31 发布

阅读量422

点赞数

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

<!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" οnchange="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" style="display:none">求购</option> 
<option value="hire" style="display:none">求租</option> 
</select> 
</dd> 
</dl> 
</form> 
</body> 
</html>

所以，通过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" οnchange="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>

所以，只能通过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" οnchange="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>

途有徐名

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
IE不支持option的display样式，只能使用remove和add

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

扫一扫