JavaScriptで選択式のプルダウンを作る方法とは【メンターが回答】

「JavaScriptを用いて選べるプルダウンを作る方法とは。」という質問にTechAcademyの現役エンジニアが解決方法を回答しています。ぜひ理解しておきましょう。

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

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

 

田島悠介

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

大石ゆかり

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

田島悠介

JavaScriptを用いて選べるプルダウンを作る方法だね!実際に回答してもらった内容を紹介するね!

大石ゆかり

お願いします!

質問

JavaScriptで選択形式のプルダウンを作る方法を教えてください。

プルダウンの中身をJavaScriptで1~10程度作って、 そこから選択できるように実装したいのですが、書き方が分からずにいます。大枠以下のように書いてみています。

 

該当のソースコード

<!DOCTYPE html>
<html>
  <head>
    <title>1~10を選べるプルダウン</title>
  </head>
  <body>
    <form name="registration">
      <select name="selectNumber"></select>歳
    </form> 
    <script type="text/javascript">
      function setSelectNumber(){
        for(var i = 1; i<= 10; i++){
        }
      }
  </body>
</html>

 

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

メンターからの回答

function setSelectNumber(){
    var selectElement = document.getElementById("セレクトボックスのID");
    for(var i = 1; i <= 10; i ++){
        var option = document.createElement("option");
        option.value = i;
        option.innerText = i;
        selectElement.appendChild(option);
    }
}

以上でできます。

selectタグにIDを付けて、そのIDを元にselect要素を取得し、そのselect要素にoptionを追加していきます。

以上、JavaScriptを用いて選べるプルダウンを作る方法について解説しました。

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

 

回答してくれたメンター

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

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

 

田島悠介

JavaScriptを用いて選べるプルダウンを作る方法について解説したよ。

大石ゆかり

JavaScriptでフォーム要素も操作出来るんですね。

田島悠介

そうそう。HTML要素は全て操作出来るんだ。

大石ゆかり

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

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

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

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

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