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

问题描述：

解决方案：

1、首先设置option的display:none的方案肯定是不可行了；
2、某网友提出的两种方案：
肯定也是不符合需求的。

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