LANG SELRCT

Apps Script Reference  (Create: Create new Spreadsheet | Create new Apps Script

Thursday, September 30, 2021

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


 
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

Extracting data from Google Sheets with regular expressions

Introduction Regular expressions are a powerful tool that can be used to extract data from text.  In Google Sheets, regular expressions ca...