【解决】SELECT标签中OPTION的显隐控制(兼容IE)

jquery 专栏收录该内容
3 篇文章 0 订阅

问题描述:

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


解决方案:

1、首先设置option的display:none的方案肯定是不可行了;
2、某网友提出的两种方案:
1.在option标签上面加上disabled="disabled"属性,表示不可用,这种方案只是让option不能选择,但没有隐藏掉
2.如果想隐藏掉,只能把option从DOM树中去除,然后对去除的option进行缓存,在要显示的时候再将option从缓存中取出加入DOM树中
肯定也是不符合需求的。

3、终极方案(经测试兼容各浏览器):给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 οnclick="toggleOptionShow($('select'),'',[0,1,3])">隐藏一,二,四</button>
<button οnclick="toggleOptionShow($('select'),[0,1,3],'')">显示一,二,四</button>


  • 4
    点赞
  • 2
    评论
  • 7
    收藏
  • 扫一扫,分享海报

评论 2 您还未登录,请先 登录 后发表或查看评论
©️2022 CSDN 皮肤主题:大白 设计师:CSDN官方博客 返回首页
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值