JavaScriptでselectタグを選択状態にする方法【メンターが回答】

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

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

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

 

田島悠介

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

大石ゆかり

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

田島悠介

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

大石ゆかり

お願いします!

質問

JavaScriptで<select>タグで特定のvalueの<option>タグを選択状態にしたいと思っています。

具体的には以下の構成(該当のソースコード HTML1)で、 以下の通り「value=3」を選択状態にしたいです(該当のソースコード HTML2)。

JavaScriptでどう書けばHTML1からHTML2の状態にできるのでしょうか?

 

該当のソースコード

HTML1

<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>

HTML2

<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で挫折しない学習方法を動画で公開中

メンターからの回答

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

<select>タグのvalueに、<option>のvalueを渡すことで、セレクトボックスの選択状態を表すことができます。

実装はこのような形になります。

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

こちらを任意の場所に書いてあげると正しく動きます。

 

以上、JavaScriptでselectタグを選択状態にする方法について解説しました。

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

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

 

回答してくれたメンター

小芝 涼太(こしばりょうた)

Webアプリケーションエンジニア。

Vue.jsを用いたフロントエンド開発を中心に、UXデザインなども行なっております。

 

田島悠介

JavaScriptでselectタグを選択状態にする方法について解説したよ。

大石ゆかり

簡単にセレクトボックスの選択肢を選択状態に出来るんですね。

田島悠介

jQueryを使うとform部品の操作は簡単だよ。後は何らかの条件の中で使用すればいいね。

大石ゆかり

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

 

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

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

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