Apps Script公式リファレンス: Apps Script Reference |障害・課題追跡: IssueTracker |Google Workspace: Status Dashboard - Summary

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>





Latest post

Google Apps Scriptの障害時はIssueTrackerを見てみる - Incidents for Apps Script are reported on Issue Tracker

IssueTracker > Apps Script issues https://issuetracker.google.com/savedsearches/566234 Google Apps Scriptの障害時は IssueTracker に課題が上がっていることが...