JQueryでselectで選択されているoptionのdata属性の値がほしい

 selectタグをJQueryのvalメソッドで値を取得すると選択されているoptionのvalueだったり、コンテンツが取得されます。
 一般的にはそれで良いんですが、valueと違う属性を取得したい場合があります。

例えば、消費税率とか。
 データベースに保存する値としては、消費税率のコードで良いのですが、画面上では、コードではなく実際の消費税率が必要とかという場合です。



例と使い方を書いておきます。

HTML

  非課税
  3%
  5%
  8
  10%

使い方

HTML上では、リストの4行目(8%の行)が選択されていると想定します。

選択されているリストのコード(value)を取得する

console.log($("#tax_rate").val2());

3
選択されているリストのdata属性を取得する

console.log($("#tax_rate").val2("rate"));

8

JQueryのプラグイン

/**
*   selectタグのoptionに付けられたdata属性の値または、そのオブジェクトの値を取得する
*   @param string data_key data属性のキー名
*   @return 指定したキーの値または、そのオブジェクトの値
*/
jQuery.fn.val2 = function(data_key){
    if($(this)[0].nodeName==="SELECT" && data_key!==undefined && data_key!=="") {
        var index = $(this)[0].selectedIndex;
        return $("option", this).eq(index).data(data_key);
    }else {
        if(data_key!==undefined && data_key!=="") {
            return $(this).data(data_key);
        }else {
            return $(this).val();
        }
    }
}

これで、JQueryのvalではなく、val2を使えば、いろいろと楽になるな。

イヤ、値のセットができないので置き換えではできないな…。
val2というメソッド名も変更しないと…。