jQueryで、<select>内でカスタムデータ属性を扱う方法

Question

jQueryで、<select>内でカスタムデータ属性を扱う方法がわかりません。

例えば、選択肢で「AAA」が選ばれたら、「AAA」とアラート表示したいのですが、どうしてもできません。

試してみた方法は、以下の方法です。

HTML（各選択肢に、カスタムデータ属性を与える）

<select class="hoge">
  <option data-select="AAA">AAA</option>
  <option data-select="BBB">BBB</option>
  <option data-select="CCC">CCC</option>
</select>

JS（選択肢でAAAが選ばれた時の挙動）

var $data= $('.hoge [data-select]');

$data.on('change', function() {
  var $this = $(this);
  var $data2 = $this.attr('data-select');

  if ($data2 == 'AAA') {
    alert("AAAが選択されました");
  }
});

JSが本当に苦手で、突っ込みどこが多いとは思うのですが、どうか、ご教授頂けましたら幸いです。

何卒、宜しくお願い致します。

Answer 1

changeイベントを設定する箇所をselectにしましょう。

$(function(){
	var $data= $('.hoge');

	$data.on('change', function() {
		var $this = $(this);
		var $data2 = $(':selected', $this).attr('data-select');

		if ($data2 == 'AAA') {
			alert("AAAが選択されました");
		}
	});
})

しかし、valueではだめなのでしょうか。
valueなら、val()でシンプルに取得出来るのですが。

<select class="hoge">
  <option value="AAA">AAA</option>
  <option value="BBB">BBB</option>
  <option value="CCC">CCC</option>
</select>

$(function(){
	var $data= $('.hoge');

	$data.on('change', function() {
		var $this = $(this);
		var $data2 = $this.val();

		if ($data2 == 'AAA') {
			alert("AAAが選択されました");
		}
	});
})

Comments

[yayak]

本当に有難うございます。実現できました。
そして、valueでやる方法までご教授頂けたこと、感動しました。
何時間も悩んでいたので、心の底から感謝申し上げます。