IE不支持option的display样式的办理方案

发布时间：2018-09-14 14:22:46 所属栏目：运营来源：站长网

导读：想实现一个很简朴的成果：当选中中介时，不表现求购与求租。本觉得通过display:none即可实现，功效发此刻option元素上行使display:none在firefox中有用，在IE6、IE7、 IE8 中都无效。 !DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transitional//EN http:/

　　想实现一个很简朴的成果：当选中“中介”时，不表现“求购”与“求租”。本觉得通过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><br /><center>如不能表现结果，请按Ctrl+F5革新本页，更多网页代码：<a href='http://www.veryhuo.com/' target='_blank'>http://www.veryhuo.com/</a></center>
提醒：可修改儿女码再运行!

　　以是，只能通过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><br /><center>如不能表现结果，请按Ctrl+F5革新本页，更多网页代码：<a href='http://www.veryhuo.com/' target='_blank'>http://www.veryhuo.com/</a></center>
提醒：可修改儿女码再运行!

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

　　转自：http://www.cnblogs.com/sink_cup/

（编辑：河北网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!

OPPO概念机泄露，5000	华为找到了让手机支持
Redmi K50 Pro屏幕升级	天玑8100电竞旗舰仅要