LANG SELRCT

コードを書く場所

2019年6月23日日曜日

datalistの値を選択したときに、選択したテキスト以外の値を返したい


デモ


星座名を選択したときに、その英語名をアラートに出してみる


仕組み

このようなオブジェクトを用意しておいて

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が使えなかったため、
テキストボックスの値を元にオブジェクトからデータを引っ張ってくる
という方法で実現しました。