iOSでeasyselectbox.jsのonClickの挙動が変？

レスポンシブサイトでeasyselectbox.jsを使ったselectのカスタマイズを行った際、プラグイン内で用意されているonClickの挙動がiOSで変だったのでメモ。

対応前

まずは挙動がおかしかったコードをそのまま記述してみます。

head内

使用するプラグインとCSSを読み込ませます。

<link rel="stylesheet" href="easyselectbox.css" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="easyselectbox.js"></script>

HTML

カスタマイズするselectです。

<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とテキストがアラート表示されるようにします。

$(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

<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>

対応前のデモページ2
　

対応方法1

jQueryのバージョンを1.8まで下げると、iOSでも正しく動作しました。
対応後のデモページ

jQuery1.8と1.9では変更点が多いので、その影響を受けているみたいです。
　

対応方法2

テキストの取得は問題ないようなので、valueの取得方法をテキストに合わせて修正してみます。
(今回修正しているeasyselectbox.jsのバージョンは1.0.7になります。)

easyselectbox.js(変更前)

変更部分のみ抜粋しています。

		} 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(変更後)

		} 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