【解決】SELECTタグにおけるOPTIONの暗黙制御(IE対応)

1513 ワード

問題の説明:
一部の機能が切り替わると、selectラベルの一部のoptionが非表示になります.ただし、optionのスタイルをdisplay:noneに設定することで、optionラベルを隠すことはできません.
ソリューション:
1、まずoptionのdisplay:noneを設定する案は実行できないに違いない.
2、あるネットユーザーが提出した2つの案:
1.optionラベルにdisabled=「disabled」属性を付けて使用不可を示します.このスキームはoptionを選択できないだけですが、隠していません.
2.非表示にするには、DOMツリーからoptionを除去し、除去したoptionをキャッシュし、表示するときにoptionをキャッシュから取り出してDOMツリーに入れるしかありません
きっと需要に合わないに違いない.
3、究極のシナリオ(各ブラウザとテスト互換):optionに親ラベルを追加し、親ラベルの非表示を設定します(ここではspanラベルを使用しています).表示する場合は親ラベルを除去すればいいです.

/*    :
     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");
}