【対処方法あり】iPhoneとかのsafariではoptionタグをJQueryのshow/hideできない。

iPhoneやらiPadやらのsafariで、条件によってoptionタグの表示・非表示が効かない件を対応しました。

■chromeやandroidでは動くのにiPhoneだけ動かない

どうも仕様でsafariとIEでoptionタグをJQueryのshow/hideでの絞り込みができないことがわかりました。optionタグに対してのdisplay:none;なんかが効かないみたいです。

いろいろ調べてみると、optionタグを全部削除して再構成したりという対処方法が書いてあったのですが、それも嫌だったのです。そこでshowOptionとhideOptionという関数を定義して、spanタグを追加し、それらを表示・非表示する方法を取りました。特に、CSSの変更等も不要で、不具合の温床になりそうなこともしていません。

定義は以下のような感じです。

$(document).ready(function(){


	$.fn.showOption = function() {
		this.each(function() {
			if( this.tagName == "OPTION" ) {
				var opt = this;
				if( $(this).parent().get(0).tagName == "SPAN" ) {
					var span = $(this).parent().get(0);
					$(span).replaceWith(opt);
					$(span).remove();
				}
				opt.disabled = false;
				$(opt).show();
			}
		});
		return this;
	}
	$.fn.hideOption = function() {
		this.each(function() {
			if( this.tagName == "OPTION" ) {
				var opt = this;
				if( $(this).parent().get(0).tagName == "SPAN" ) {
					var span = $(this).parent().get(0);
					$(span).hide();
				} else {
					$(opt).wrap("<span>").hide();
				}
				opt.disabled = true;
			}
		});
		return this;
	}
});

こんなHTMLがあったとします。

<select name="Test" id="Test">
    <option value="test1">test</option>
    <option value="test2">test2</option>
    <option value="test3">test3</option>
    <option value="test4">test4</option>
</select>

そして、以下のように呼び出します。

$('#test').find('option').hideOption();

そうすると

<select name="Test" id="Test">
  <span style="display:none">
    <option value="test1">test</option>
  </span>
  <span style="display:none">
    <option value="test2">test2</option>
  </span>
  <span style="display:none">
    <option value="test3">test3</option>
  </span>
  <span style="display:none">
    <option value="test4">test4</option>
  </span>
</select>

こんな感じでSPANでoptionを自動でくるんで、非表示にしてくれます。

showOptionを指定すると、このspanのdisplay:noneが削除されます。

ぜひ、参考にしてみてください。