JavaScriptでselectタグの選択中のvalue値を取得する方法【メンターが回答】

「selectタグで特定のvalueのoptionタグを選択状態にする方法とは。」という質問にTechAcademyの現役エンジニアが解決方法を回答しています。ぜひ理解しておきましょう。

TechAcademyマガジンはオンラインのプログラミングスクールTechAcademy [テックアカデミー]が運営する教育×テクノロジーのWebメディアです。初心者でもすぐ勉強できる記事が2,000以上あります。

※TechAcademyに実際に寄せられた質問に現役エンジニアのメンターが回答しました。

 

田島悠介

質問に対して現役のエンジニアが回答していくシリーズだね!

大石ゆかり

今回はどういう質問でしょうか?

田島悠介

selectタグで特定のvalueのoptionタグを選択状態にする方法だね!実際に回答してもらった内容を紹介するね!

大石ゆかり

お願いします!

質問

動的に吐き出される<select>タグで特定のvalueの<option>タグをJavaScriptで選択状態にしたいです。

具体的には該当のソースコードの構成になります。

 

該当のソースコード

<select id="hoge">
  <option value="hoge1">・・・<option>
  <option value="hoge2">・・・<option>
  <option value="hoge3">・・・<option>
  <option value="hoge4">・・・<option>
  <option value="hoge5">・・・<option>
  <option value="hoge6">・・・<option>
  <option value="hoge7">・・・<option>
  <option value="hoge8">・・・<option>
</select>
//以下の通り「value=3」を選択状態にしたいです。
<select id="hoge">
  <option value="hoge1">・・・<option>
  <option value="hoge2">・・・<option>
  <option value="hoge3" selected>・・・<option>
  <option value="hoge4">・・・<option>
  <option value="hoge5">・・・<option>
  <option value="hoge6">・・・<option>
  <option value="hoge7">・・・<option>
  <option value="hoge8">・・・<option>
</select>

 

[PR] JavaScript・jQueryで挫折しない学習方法を動画で公開中

メンターからの回答

valメソッドを使用することで取得できます。

$("#hoge").val("hoge3");

以上、JavaScriptでselectタグの選択中のvalue値を取得する方法について解説しました。

TechAcademyでは、現役JavaScriptエンジニアのメンターが質問にすぐ回答します。

 

回答してくれたメンター

武田 勝輝(たけだ しょうき)

HaskellやLispなど関数型プログラミング言語を使用した数値計算システム開発業務に従事。

 

田島悠介

selectタグで特定のvalueのoptionタグを選択状態にする方法について解説したよ。

大石ゆかり

HTMLだとcheckedやselectedなどがありましたね。

田島悠介

そうそう。JavaScriptでも値を選択状態に出来るんだよ。

大石ゆかり

わかりました。ありがとうございます!

他にもJavaScriptでグローバル変数を取得する方法についてメンターが回答しているので、合わせてご覧ください。

TechAcademyではJavaScriptを使ってWebサービスを公開できるオンラインブートキャンプ フロントエンドコース(JavaScript・jQuery講座)を開催しています。プログラミングの初心者でも受講可能です。

現役エンジニアがパーソナルメンターとして受講生に1人ずつつき、マンツーマンのメンタリングで学習をサポートし、最短4週間でオリジナルWebサービスを開発することが可能です。

独学に限界を感じている場合はご検討ください。