IE不支持option的display样式,只能使用remove和add
2009-12-15 00:00
459 查看
it works..............
发布者
中介
个人
出售
出租
求购
求租
[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]
想实现一个很简单的功能:当选中“中介”时,不显示“求购”与“求租”。本以为通过display:none即可实现,结果发现在option元素上使用display:none在firefox中有效,在IE6、IE7、IE8中都无效。
所以,通过javascript设置display:none也是在IE中无效,代码如下:
it works..............
发布者
中介
个人
出售
出租
求购
求租
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();
[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]
所以,只能通过select元素的remove和add方法,当选中“中介” 时,把“求租”和“求购”删除。代码如下:
it works..............
发布者
中介
个人
出售
出租
求购
求租
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
}
}
}
[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]
这样在IE和firefox中都有效了。真费解啊,IE8竟然还不支持option的display:none 。
上面的代码还有一个问题:在IE7和IE8中 选中“个人”,然后刷新,将导致“求租”和“求购”被删除。在IE6和firefox3.5.5中正常。
发布者
中介
个人
出售
出租
求购
求租
[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]
想实现一个很简单的功能:当选中“中介”时,不显示“求购”与“求租”。本以为通过display:none即可实现,结果发现在option元素上使用display:none在firefox中有效,在IE6、IE7、IE8中都无效。
所以,通过javascript设置display:none也是在IE中无效,代码如下:
it works..............
发布者
中介
个人
出售
出租
求购
求租
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();
[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]
所以,只能通过select元素的remove和add方法,当选中“中介” 时,把“求租”和“求购”删除。代码如下:
it works..............
发布者
中介
个人
出售
出租
求购
求租
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
}
}
}
[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]
这样在IE和firefox中都有效了。真费解啊,IE8竟然还不支持option的display:none 。
上面的代码还有一个问题:在IE7和IE8中 选中“个人”,然后刷新,将导致“求租”和“求购”被删除。在IE6和firefox3.5.5中正常。
相关文章推荐
- IE不支持option的display样式,只能使用remove和add【转】
- IE不支持option的display样式,只能使用remove和add
- IE不支持option的display样式,只能使用remove和add【转】
- IE不支持option的display样式,只能使用remove和add
- IE不支持option的display样式,只能使用remove和add【转】
- jquery之修改元素样式(添加和删除类名称,使用addClass(),removeClass(),toggleClass()方法)
- 使用jQuery解决IE不支持的option disable属性【转】
- IE678不支持<option>style="display:none"
- 使用jQuery解决IE不支持的option disable属性【转】
- IE 兼容模式下不支持DIV CSS样式display:inline-block,解决
- 使用jQuery解决IE不支持的option disable属性
- 让IE的OPTION支持click事件
- XP下的IIS不支持“新建网站”的功能,XP下的IIS只能使用新建“虚拟目录”
- 使用原生JS实现jQuery的addClass, removeClass, hasClass函数功能
- jQuery之addClass与removeClass使用实例
- vlc 详细使用方法:libvlc_media_add_option 函数中的参数设置
- 支持FF和IE的回车提交(不使用Submit按钮)
- showModalDialog使用详解(IE4+ 支持)
- EntityFramework Core 1.1 Add、Attach、Update、Remove方法如何高效使用详解
- 使用Js来让IE支持png图片透明效果