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>
|
