SELECT标签中OPTION的显隐控制(兼容IE和Safari)

问题描述:

在有些功能切换的时候,select标签中的某些option是要被隐藏的。但通过设置option的样式为 display:none根本无法隐藏option标签。

解决方案:

1、首先设置option的display:none的方案肯定是不可行了;

2、在option标签上面加上disabled="disabled"属性,表示不可用,这种方案只是让option不能选择,但没有隐藏掉

3、如果想隐藏掉,只能把option从DOM树中去除,然后对去除的option进行缓存,在要显示的时候再将option从缓存中取出加入DOM树中肯定也是不符合需求的。

4、终极方案(经测试兼容各浏览器):给option外加一个父级标签,并设置父级标签隐藏[此处用的是span标签],如果要显示的话则去除父级标签即可。

<script>
/*参数说明:
需被控制的Select对象,
需显示的option序号(留空则不处理) eg:[0,1,3],
需隐藏的option序号(留空则不处理) eg:[2,4,6]
*/
function toggleOptionShow(obj,arrShow,arrHide){
	function arrHandle(arr,type){
		if($.isArray(arr)){
			var len=arr.length;
			for(i=0;i<len;i++){
				var optionNow=obj.find("option").eq(arr[i]);
				var optionP=optionNow.parent("span");
				if(type=="show"){					
					if(optionP.size()){
						optionP.children().clone().replaceAll(optionP); 
					}				
				}else{
					if(!optionP.size()){
						optionNow.wrap("<span style='display:none'></span>");
					}
				}
			}
		}
	}
	arrHandle(arrShow,"show");
	arrHandle(arrHide,"hide");
}
</script>
<select>
	<option value="papername" selected="selected">选项一</option>
	<option value="state">选项二</option>
	<option value="state">选项三</option>
	<option value="state">选项四</option>
	<option value="state">选项五</option>
	<option value="state">选项六</option>
</select>
 
<button onclick="toggleOptionShow($('select'),'',[0,1,3])">隐藏一,二,四</button>
<button onclick="toggleOptionShow($('select'),[0,1,3],'')">显示一,二,四</button>

 

  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值