選択済みのセレクトボックスの属性値を取得する際、value値は$('select').val()で取れますが、他の属性値はoption:selectedで取り出す必要があります。備忘録も兼ねて本記事では、セレクトボックスの属性値を取得する方法について色々まとめてみました。サンプルコード.val()でvalueを取得selectタグに対してval();で簡単に選択済みの値を取得できます。属性値はoption:selectedで選択済みの選択肢を指定し、attr();で値を取得できます。false;});dataの属性であれば.data()でも取得可能data属性であれば、data();でも取得できます。false;});複数選択(multiple属性を使用)している場合のvalue値multiple属性を付与したセレクトボックスの場合、若干取得したい値によって挙動が異なるので注意が必要です。value値の場合は単一の選択肢同様の処理で取得すると、勝手に配列に格納されます。以下のサンプルコードを実行すると、選択した値はすべてカンマ区切りで表示されます。false;});複数選択(multiple属性を使用)している場合の表示テキスト表示テキストをすべて取得する場合、value値と同じ実装をすると若干挙動が異なります。class="piyo2-btn">表示テキストの値をアラート表示</a></li></ul>js以下のようにvalue値と同様のロジックで実装すると、全ての値が連結されて取得されます。false;});選択した値をvalue値同様配列化するには、eachで回して用意した変数にpushする必要があります。false;});これでvalue値同様、アラートするとカンマ区切りで表示されます。属性値の場合はこれまた微妙に挙動が異なります。class="piyo4-btn">属性値をアラート表示</a></li></ul>jsvalue値と同様のロジックで実装すると、選択した最初の値しか取得できません。false;});表示テキスト同様、選択した値全てを取得するにはeachで回して配列にpushする必要があります。false;});デモ実際に動作を確認できるデモページも公開しておりますのであわせてご確認ください。選択済みのセレクトボックスの属性を取得する色々な方法まとめまとめると、以下のポイントに注意して実装するとよいです。複数選択におけるvalue値は勝手に配列に格納される複数選択におけるvalue値以外の取得はeachを回して配列にpush選択済みの値を取得するという簡単な実装ではありますが、掘り下げると結構細かい挙動の違いが発見できたりして面白いですね。いった挙動を覚えておくと予期せぬバグの回避につながるので、どうぞご参考になれば幸いです。ため、即時には反映されません。住宅ローン2019年5月7日さらに見る記事を書いている人フォローするRSSを購読するWebデザイナー/フロントエンド・エンジニアのMasaです。独学でWebデザインを勉強後Web業界へ就職し、今の会社に勤めて12年目になりました。2016年4月にマイホームを購入し、休日は芝生いじりと育児に励んでいます。