デモ
星座名を選択したときに、その英語名をアラートに出してみる
仕組み
このようなオブジェクトを用意しておいて
var objs = [
{ 'id': 'Aries', 'value': 'おひつじ座' },
{ 'id': 'Taurus', 'value': 'おうし座' },
{ 'id': 'Gemini', 'value': 'ふたご座' },
{ 'id': 'Cancer', 'value': 'かに座' },
{ 'id': 'Leo', 'value': 'しし座' },
{ 'id': 'Virgo', 'value': 'おとめ座' },
{ 'id': 'Libra', 'value': 'てんびん座' },
{ 'id': 'Scorpius', 'value': 'さそり座' },
{ 'id': 'Sagittarius', 'value': 'いて座' },
{ 'id': 'Capriconus', 'value': 'やぎ座' },
{ 'id': 'Aquarius', 'value': 'みずがめ座' },
{ 'id': 'Pisces', 'value': 'うお座' }
]
テキストボックスで選択した値に一致するvalueのidを返す
コード.gs
function doGet() {
return HtmlService.createHtmlOutputFromFile("index");
}
|
意訳この機能がやること 指定したHTMLファイルを表示する |
index.html
<!DOCTYPE html>
<html>
<body>
<div id='main_div'>
<input list='data_list' id='data_list_input'>
</div>
</body>
<script>
getData();
/************************************
elem(id)
************************************/
function elem(id) {
return document.getElementById(id);
}
/************************************
objs
************************************/
function returnObj() {
var objs = [
{ 'id': 'Aries', 'value': 'おひつじ座' },
{ 'id': 'Taurus', 'value': 'おうし座' },
{ 'id': 'Gemini', 'value': 'ふたご座' },
{ 'id': 'Cancer', 'value': 'かに座' },
{ 'id': 'Leo', 'value': 'しし座' },
{ 'id': 'Virgo', 'value': 'おとめ座' },
{ 'id': 'Libra', 'value': 'てんびん座' },
{ 'id': 'Scorpius', 'value': 'さそり座' },
{ 'id': 'Sagittarius', 'value': 'いて座' },
{ 'id': 'Capriconus', 'value': 'やぎ座' },
{ 'id': 'Aquarius', 'value': 'みずがめ座' },
{ 'id': 'Pisces', 'value': 'うお座' }
]
return objs;
}
elem('data_list_input').onchange = dataChanged;
/************************************
getData
************************************/
function getData() {
var main = document.getElementById('main_div');
var datalist = document.createElement('datalist');
datalist.setAttribute('id', 'data_list');
var objs = returnObj();
for (var i = 0; i < objs.length; i++) {
var id = objs[i]['id'];
var value = objs[i]['value'];
var option = document.createElement('option');
option.setAttribute('id', id);
option.setAttribute('value', value);
datalist.appendChild(option);
}
main.appendChild(datalist);
}
/************************************
dataChanged
************************************/
var targetName;
function dataChanged() {
var datalist = elem('data_list');
var dataValue = elem('data_list_input').value;
var id = elem('data_list_input').list.options[0].id;
var objs = returnObj();
targetName = dataValue;
var filtered = objs.filter(judge);
var dataId = getResult(filtered);
alert(dataId);
}
function judge(items) {
var regexp = new RegExp(targetName);
var judged = regexp.test(items['value']);
return judged;
}
function getResult(filtered) {
var result = [];
for (var i = 0; i < filtered.length; i++) {
result.push(filtered[i]['id']);
}
return result;
}
</script>
</html>
|
補足
selectとoptionの場合は
選択したときにonclickでthis.idなどの値を返せますが、
datatistとoptionの場合は
onclickが使えなかったため、
テキストボックスの値を元にオブジェクトからデータを引っ張ってくる
という方法で実現しました。
selectとoptionの場合は
選択したときにonclickでthis.idなどの値を返せますが、
datatistとoptionの場合は
onclickが使えなかったため、
テキストボックスの値を元にオブジェクトからデータを引っ張ってくる
という方法で実現しました。
