【jQuery】jQueryでselectMenuを導入したらiOS Safariで動いてくれない話

研究
この記事は約6分で読めます。

この記事は2年前の記事です。当時の情報、理解に基づいておりますのでご留意ください

ぼやき

デザイン性のみで採用されたjQueryプラグイン同士の衝突を時には力技で回避する骨の折れるお仕事です。

Selectmenu | jQuery UI
jQuery UI is a curated set of user interface interactions, effects, widgets, and themes built on top of the jQuery JavaScript Library. Whether you're building h...

こちらのサイトはちゃんと動いてくれるんですが、現在開発中のサイトは他のプラグインと衝突するようです。

解析してみましょう

動作を見る限りでは

<select name="speed" id="speed" style="display: none;">
	<option>Slower</option>
	<option>Slow</option>
	<option selected="selected">Medium</option>
	<option>Fast</option>
	<option>Faster</option>
</select>

静的画面の段階ではこう書いたセレクトメニューから

<!-- タップすると下のプルダウンを展開 -->
<span tabindex="0" id="speed-button" role="combobox" aria-expanded="false" aria-autocomplete="list" aria-owns="speed-menu" aria-haspopup="true" class="ui-selectmenu-button ui-button ui-widget ui-selectmenu-button-closed ui-corner-all" aria-activedescendant="ui-id-28" aria-labelledby="ui-id-27" aria-disabled="false">
<span class="ui-selectmenu-icon ui-icon ui-icon-triangle-1-s"></span>
<span class="ui-selectmenu-text">Fast</span>
</span>
<!-- UIついたプルダウン -->
<div class="ui-selectmenu-menu ui-front ui-selectmenu-open" style="top: 97.1167px; left: 22px;">
	<ul aria-hidden="false" aria-labelledby="speed-button" id="speed-menu" role="listbox" tabindex="0" class="ui-menu ui-corner-bottom ui-widget ui-widget-content" aria-activedescendant="ui-id-27" aria-disabled="false" style="width: 256px;">
		<li class="ui-menu-item"><div id="ui-id-24" tabindex="-1" role="option" class="ui-menu-item-wrapper">Slower</div></li>
		<li class="ui-menu-item"><div id="ui-id-25" tabindex="-1" role="option" class="ui-menu-item-wrapper">Slow</div></li>
		<li class="ui-menu-item"><div id="ui-id-26" tabindex="-1" role="option" class="ui-menu-item-wrapper">Medium</div></li>
		<li class="ui-menu-item"><div id="ui-id-27" tabindex="-1" role="option" class="ui-menu-item-wrapper ui-state-active">Fast</div></li>
		<li class="ui-menu-item"><div id="ui-id-28" tabindex="-1" role="option" class="ui-menu-item-wrapper">Faster</div></li>
	</ul>
</div>

こんなUIの効いたプルダウンをよしなに生成してくれる模様。
ところがiOS Safariでは選択したものが反映できません。

解決

やろうとした実装は以下の通り。

  1. $(document).on(‘click’, ‘#speed-menu li’, function () {}); で、プルダウン選択時のイベントを記述
  2. 1でタップされた li 要素が #speed-menu の中で何番目なのかを取得
  3. #speed のoptionの同じ位置のもののvalue、textを取得
  4. #speed-buttonの文言、および#speedの選択内容に反映

完成品

$(document).on('click', '#speed-menu li', function () {
	event.preventDefault();
	var li_index = $('#speed-menu li').index(this);
	$('#speed').val(li_index);
	$('#speed-button .ui-selectmenu-text').html($('#speed option:selected').text());
});

力技って割にはシンプルな気が。
どなたかの参考になればと思います。

参考サイト

jQueryでクリックされた要素が何番目か取得する - Qiita
イベントリスナーのコールバックの中でクリックされた要素が何番目の要素か知りたい! そういうときに役立つTipsです。 <ul><li class="some-item">hoge</li> ...
jQueryを利用してselected、checkedで選択状態に - matsukaz's blog
jQueryを利用してコンボボックスを選択状態にできないかなって思って調べていたら、selectで指定のものを選択状態にってエントリを発見。早速試してみました。 値1 値2 値3 ってHTMLに対して $("#col1").val("val2"); って記述でほんとに選択状態にできました。素敵過ぎです。 check...
jQueryでselectタグの値やテキストを取得する
セレクトボックスで選択したvalueやテキスト、またoption要素全部をjQueryで取得する方法、multipleでの複数の値に対応した方法もご紹介します。
jQuery リファレンス:複数のセレクタ(or)
初心者向けのjQuery入門講座|デザイナー向けのJavaScriptライブラリ

コメント

タイトルとURLをコピーしました