iPad(+Safari)で、 select の option に対して、 hide,show が効かない現象に対する対策

こちらの記事を参考にしました。
http://moshimoworks.com/2012/02/14/jquery-select-tag-manipulation/
MacのSafari（webkit系）では、jQueryのhide、showがきかないと
紹介されていますが、私はiPadのSafariで同じ現象に遭遇しました。

日本ではあまり記事がないのですが（2014年4月現在）
stackoverflowでは結構取り上げられています。
http://stackoverflow.com/questions/8373735/jquery-hide-option-doesnt-work-in-ie-and-safari

optionをtoggleすれば直るようなことが書いてありますが、
今回はoption全体ではなく、一部を表示・非表示で切り替えたいので
toggleでは出来ません。

私の場合、optionに「type」という属性を持たせて、
条件によってセレクトボックスの項目を切り替えられるようにしていました。
GoogleChromeではOKでしたが、iPad+Safariでは隠したい項目が隠れません。

対応策です。
画面を読み込んだ時に、optionをtype別に、別の場所にcloneしました。

$('#clone1').append( $("#edit select[name='selType'] option[type=1]").clone() );
$('#clone2').append( $("#edit select[name='selType'] option[type=2]").clone() );

あとは、選択されたときに、まずoptionをリセット。

$("#edit select[name='selType'] option").remove();

そのあと、cloneしておいた内容を、条件に合わせてセットします。

$("#edit select[name='selType']").append( $('#clone1 option').clone() );

あんまりこういう使い方はしないのでしょうが、ウェブベースでアプリなど作っていると
はまりそうなのでメモしておきます。