[JavaScript] セレクトボックス値を動的に生成する

投稿日：2016年10月18日更新日：2018年5月2日

連想配列オブジェクトの値から、セレクトボックスの要素を動的に生成するサンプルです。

サンプルソース

例）連想配列arrの値でセレクトボックス値を動的に生成する

function createSelectBox(){
  //連想配列の配列
  var arr = [
    {val:"01", txt:"ポチ"},
    {val:"02", txt:"タマ"},
    {val:"03", txt:"モモ"}
  ];

  //連想配列をループ処理で値を取り出してセレクトボックスにセットする
  for(var i=0;i<arr.length;i++){
    let op = document.createElement("option");
    op.value = arr[i].val;  //value値
    op.text = arr[i].txt;   //テキスト値
    document.getElementById("sel1").appendChild(op);
  }
};

function createSelectBox(){

//連想配列の配列

var arr = [

{val:"01", txt:"ポチ"},

{val:"02", txt:"タマ"},

{val:"03", txt:"モモ"}

];

//連想配列をループ処理で値を取り出してセレクトボックスにセットする

for(var i=0;i<arr.length;i++){

let op = document.createElement("option");

op.value = arr[i].val; //value値

op.text = arr[i].txt; //テキスト値

document.getElementById("sel1").appendChild(op);

}

};

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="utf-8">
  <title>サンプル</title>
  <script src="sample.js"></script>
</head>
<body>
  <selet id="sel1"></select>
  <input type="button" value=" ボタン " onclick="createSelectBox();" />
</body>
</html>

<!DOCTYPE html>

<head>

</head>

<body>

</body>

</html>

実行サンプル

ボタンを押すと、セレクトボックスを動的に生成します。

　
※ボタンを押す前は要素はありませんが、押した後は要素が生成されます。

解説

HTML要素はdocument.createElementで作ることができます。
作った要素を子要素としてHTMLに追加するには、appendChildで追加できます。

執筆者：とら