轉載地址：https://blog.csdn.net/sanyuedexuanlv/article/details/26455925      ，感謝大大！

問題描述：

在有些功能切換的時候，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 onclick="toggleOptionShow($('select'),'',[0,1,3])">隱藏一,二,四</button>
<button onclick="toggleOptionShow($('select'),[0,1,3],'')">顯示一,二,四</button>