<!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" style="display:none">求購</option>
<option value="hire" style="display:none">求租</option>
</select>
</dd>
</dl>
</form>
</body>
</html>
想實現一個很簡單的功能：當選中“中介”時，不顯示“求購”與“求租”。本以為通過display:none即可實現，結果發現在option元素上使用display:none在firefox中有效，在IE6、IE7、IE8中都無效。
所以，通過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>
所以，只能通過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>
這樣在IE和firefox中都有效了。真費解啊，IE8竟然還不支持option的display:none 。
上面的代碼還有一個問題：在IE7和IE8中 選中“個人”，然后刷新，將導致“求租”和“求購”被刪除。在IE6和firefox3.5.5中正常。
標簽: javascript, css, ie
http://www.cnblogs.com/sink_cup/archive/2009/12/15/ie_option_display_none_select_remove_add_html_dom.html
<optgroup value = "3">4</optgroup> 直接隱藏！
