IE不支持option的display样式,只能使用remove和add【转】
来源:互联网 发布:当当读书软件 编辑:程序博客网 时间:2024/06/06 07:45
<!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> 直接隐藏!
- IE不支持option的display样式,只能使用remove和add【转】
- IE不支持option的display样式,只能使用remove和add
- 使用jQuery解决IE不支持的option disable属性【转】
- IE浏览器不支持display:none导致option不能隐藏的问题
- ie不支持CSS3的border样式
- option元素 display属性在IE下无效的解决方法
- IE678不支持<option>style="display:none"
- EventListener的add和remove
- IE支持:id.style.display,火狐不支持
- 解决IE不支持display:inline-block;
- 为ie中不支持的元素添加样式
- 解决IE浏览器不支持CSS样式呈现的问题
- 模拟 List 的 add 和 remove
- ArrayList的add和remove方法
- ie chrome 跟 火狐 中 select 下拉框 option中不支持onclick事件的解决办法
- 迭代(遍历)时候不可以使用集合的remove和add方法,但可使用Java迭代器的remove和add方法
- add和remove
- 完美解决IE浏览器 option display:none 隐藏无效
- 编译环境。路径设置
- HTML连接
- nice sentences
- JQuery 改指定的内容 设置隐藏内容为可见
- 使用jQuery解决IE不支持的option disable属性【转】
- IE不支持option的display样式,只能使用remove和add【转】
- jQuery实现删除option控件下的元素
- Json文件读取
- Ubuntu 下静态IP修改
- jQuery select 操作。
- mount 时遇到connection unfused 错误操作
- 去掉input 输入框的边框
- 调试onvif 用到的一些工具。。linux 命令!
- 创建root 用户