JavaScriptでセレクトボックスを動的に作成する

時間や分、日付のようなセレクトボックスを作る時に、ベタにHTMLを書いても良いんだけど面倒。
しかも複数になってくると、HTMLの見通しも悪くなる。
というわけで、JavaScriptで動的に生成してみた。

まずは、生成する関数。
最初はjQuery使ってたけど、やめたらだいぶ長くなった…。

function createNumberSelects(targetArray) {
  targetArray.forEach(function(element) {
    createNumberSelect(element.id, element.max);
  });
}

function createNumberSelect(id, max) {
  var target = document.getElementById(id);

  // 子ノードを全て削除
  while(target.firstChild) {
    target.removeChild(target.firstChild);
  }

  // 子ノード生成
  for (var i = 0; i < max; i++) {
    var element = document.createElement('option');
    element.innerHTML = ('0' + i).slice(-2);
    element.value = i;
    target.appendChild(element);
  }
}

続いて、これを使う方。

// 1つだけ作成
createNumberSelect('hour', 24);

// 複数ID分をまとめて作成
createNumberSelects([
  {id: 'hour', max: 24},
  {id: 'minute', max: 60},
]);