【jQuery】セレクトボックスで選択された項目の属性取得

セレクトボックスで選択されている選択肢の属性の取得方法についてのまとめ。

コードを書いているときにあれ？となったことが何回かあるため忘れないように記録しておきます。

コード例

次のようなセレクトボックスがあったとします。

<select id="selectFruit">
    <option data-fruit="orange">オレンジ</option>
    <option data-fruit="apple">りんご</option>
    <option data-fruit="peach">桃</option>
</select>

選んだ選択肢の Value を取得する場合は次のようにコーディングすれば取得できます。

$("#selectFruit").val();

問題は data 属性などの属性を取得する方法は、、、と、いつも忘れていました。

具体的には次のように option:selected といった具合にセレクタを指定することがポイント！！

$("#selectFruit option:selected").data("fruit");

これで無事セレクトボックスで選ばれていた選択肢の属性の取得ができます。