【javascript】シンプルな動的selectの生成、option（選択肢）の追加

やりたいこと

一次元配列からselectの選択肢を動的に作成

中身

selectにondblclickクリックで、optionをselectに追加

See the Pen
createselect by Hirofumi Sato (@hfmst)
on CodePen.

コード

index.html

<select id="test" ondblclick="create_op()"></select>

js.html

function create_op(){
  let arr = ["赤","青","緑","黒","白"];      //適当な配列用意
  let sl = document.getElementById('test'); //対象のselect取得

 if(sl.length<arr.length){    //selectが空の時のみ関数実行
    for(let num in arr){      //arrの要素数を0から順にnumに入れて繰り返し処理
      let op = document.createElement('option');  //optionを新しく毎回作る
      op.text = arr[num];                         //optionのテキストに配列[num番目]の値を入れる 
      sl.appendChild(op);                         //optionをselectに追加
    }
  }
}