成长脚印-专注于互联网发展

【解决】SELECT标签中OPTION的显隐控制

post by:天之骄子 2013-4-20 15:04

问题描述：

在有些功能切换的时候，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标签]，如果要显示的话则去除父级标签即可。

以下给出JQ代码，详细样例请看DEMO

<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>

点击查看DEMO

评论：

lucker

2013-11-21 16:50 回复

不错

发表评论：