レスポンシブサイトでeasyselectbox.jsを使ったselectのカスタマイズを行った際、プラグイン内で用意されているonClickの挙動がiOSで変だったのでメモ。
対応前
まずは挙動がおかしかったコードをそのまま記述してみます。
head内
使用するプラグインとCSSを読み込ませます。
1 2 3 | <link rel="stylesheet" href="easyselectbox.css" /><script src="easyselectbox.js"></script> |
HTML
カスタマイズするselectです。
1 2 3 4 5 6 7 | <select id="select"> <option value="A">A</option> <option value="B">B</option> <option value="C">C</option> <option value="D">D</option> <option value="E">E</option></select> |
JavaScript
easyselectbox.jsの設定と、selectが選択されたときに選択されたvalueとテキストがアラート表示されるようにします。
1 2 3 4 5 6 7 8 | $(function () { $('#select').easySelectBox({ onClick:function(data) { alert('value:' + data.value); alert('text:' + data.text); } });}); |
対応前のデモページ
PCのブラウザ等で見た場合にはきちんと選択した項目がアラート表示されますが、iOSで見た場合にvalueが常に「A」になってしまいます。
(テキストはきちんと取得できています。)
1番目のvalueを空にしたり、初期選択項目を1番目以外にしたりしてみましたが、常にselectの1番目のvalueが返ってきているようです。
HTML
1 2 3 4 5 6 7 8 | <select id="select"> <option value="">選択してください</option> <option value="A">A</option> <option value="B">B</option> <option value="C" selected>C</option> <option value="D">D</option> <option value="E">E</option></select> |
対応方法1
jQueryのバージョンを1.8まで下げると、iOSでも正しく動作しました。
対応後のデモページ
jQuery1.8と1.9では変更点が多いので、その影響を受けているみたいです。
対応方法2
テキストの取得は問題ないようなので、valueの取得方法をテキストに合わせて修正してみます。
(今回修正しているeasyselectbox.jsのバージョンは1.0.7になります。)
easyselectbox.js(変更前)
変更部分のみ抜粋しています。
285 286 287 288 289 290 291 292 293 294 295 296 297 298 299 300 301 302 303 | } else if($(e.target).is('.'+options.classNames.item)){//esb item is clicked var index = dropdown.find('.'+options.classNames.item).index($(e.target)); _updateSelect(selectObj, index); if(options.onClick!=null){ options.onClick.call(this, {'value':selectObj.val(), 'text':selectObj.find('option').eq(index).html()}); } } else if($('.'+options.classNames.item).has($(e.target)).length>0){//cufon text fix. Will also detect if a descendant of esb item was clicked var index = dropdown.find('.'+options.classNames.item).index($(e.target).parents('.'+options.classNames.item)); _updateSelect(selectObj, index); if(options.onClick!=null){ options.onClick.call(this, {'value':selectObj.val(), 'text':selectObj.find('option').eq(index).html()}); } } |
easyselectbox.js(変更後)
285 286 287 288 289 290 291 292 293 294 295 296 297 298 299 300 301 302 303 | } else if($(e.target).is('.'+options.classNames.item)){//esb item is clicked var index = dropdown.find('.'+options.classNames.item).index($(e.target)); _updateSelect(selectObj, index); if(options.onClick!=null){ options.onClick.call(this, {'value':selectObj.find('option').eq(index).attr('value'), 'text':selectObj.find('option').eq(index).html()}); } } else if($('.'+options.classNames.item).has($(e.target)).length>0){//cufon text fix. Will also detect if a descendant of esb item was clicked var index = dropdown.find('.'+options.classNames.item).index($(e.target).parents('.'+options.classNames.item)); _updateSelect(selectObj, index); if(options.onClick!=null){ options.onClick.call(this, {'value':selectObj.find('option').eq(index).attr('value'), 'text':selectObj.find('option').eq(index).html()}); } } |
selectObj.val()で取得しているところを、selectObj.find(‘option’).eq(index).attr(‘value’)という形で取得するように変更しました。
対応後のデモページ2
コメントが承認されるまで時間がかかります。