LANG SELRCT

Google Apps Scriptのコードを書く場所  (新規作成: スプレッドシート | スクリプトエディタ

2021年9月30日木曜日

データリストで選択した値を取得したい


 
inputのsearchボックスでdatalistから選択した値をconsoleに出力したい

  

デモ




コード.gs
function doGet() {
  return HtmlService.createHtmlOutputFromFile("index");
}



index.html
<!DOCTYPE html>
<html>
  <body>
    <div id="main_div"></div>

<script>
myFunction();

function myFunction() {
  var arrays = ["ame", "yuki", "mizore"];
  var id = "tenki"
  createDatalist(arrays, id);
}

function createDatalist(arrays, id) {
  var main_div = document.getElementById('main_div');
  var input = document.createElement('input');
  input.setAttribute("type", "search");
  input.setAttribute("id", id);
  input.setAttribute("list", id + "_list");
  input.onchange = function() {
    console.log(this.value);
  }
  main_div.appendChild(input);

  var datalist = document.createElement('datalist');
  datalist.setAttribute("id", id + "_list");
  for (var i = 0; i < arrays.length; i++) {
    var option = document.createElement('option');
    option.setAttribute("value", arrays[i]);
    datalist.appendChild(option);
  }
  main_div.appendChild(datalist);
}

</script>
  </body>
</html>





最新の投稿

GASでWebアプリを作ってローカルファイルをGoogleドライブにアップしたい(アプリを開くユーザーとファイルをアップロードするユーザーを分けたい)

Google Driveに複数ファイルをアップロードしたい(submitボタン使わない) の応用です。 GASでWebアプリを作ってローカルファイルをGoogleドライブにアップしたい 以下の条件を満たすもの 条件 アップロード先はGoogleドライブの共有フォルダ そのフォルダ...