LANG SELRCT

コードを書く場所についてはこちら

2017年12月31日日曜日

HTML要素を動的に作りたい(セレクトボックス)

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




コード.gs
function doGet() {
  return HtmlService.createHtmlOutputFromFile("index");
}
意訳
この機能がやること
指定したHTMLファイルを表示する




index.html
<!DOCTYPE html>
<html>
<body>
  <div id="main_div">
  </div>
</body>
<script>
  var values = ["選択肢1", "選択肢2", "選択肢3"];
  create_select(values);

  function create_select(values) {
    var main = document.getElementById('main_div');
    var select = document.createElement('select');
    var group1 = document.createElement('optgroup');
    group1.label = "グループ1";
    for (var i = 0; i < values.length; i++) {
      var value = values[i];
      var option = document.createElement('option');
      option.setAttribute("value", value);
      option.innerHTML = value;
      group1.appendChild(option);
    }
    select.appendChild(group1);
    main.appendChild(select);
  }
</script>
</html>
意訳
これはHTML5文書です


divを置く (idはmain_div)



選択肢の値を用意して
create_selectに渡す

この機能がやること
idがmainの要素を取得して
セレクトボックスを作って
オプションのグループを作って
グループラベルを付ける
選択肢の値の数だけ以下を繰り返す
値を一つずつ取得して
オプションを作って
値をvalueに入れて
値をinnerHTMLに入れて
グループ1に追加する

セレクトボックスにグループ1を追加して
mainのdivにセレクトボックスを追加する