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

2020年5月29日金曜日

データリストで選択した値と同じラジオボタンを選択したい


このブログ内でデモを作ろうとしたけれど、うまく動かなかったので画像で。

動きがないとわかりにくいけれどこういう感じです。



コード.gs
function doGet() {
  return HtmlService.createHtmlOutputFromFile("index");
}
意訳
この機能がやること
指定したHTMLファイルを表示する




index.html
<!DOCTYPE html>
<html>
<body>

  <input type="text" list="colors" id="color">
  <datalist id="colors">
    <option value="blue">
    <option value="green">
  </datalist>

  <form id="radios">
    <label><input type="radio" name="radio1" id="blue">blue</label><br>
    <label><input type="radio" name="radio1" id="green">green</label>
  </form>

<script>
document.getElementById("color").onchange = selectRadio;

function selectRadio() {
  var color = document.getElementById("color").value;
  var radios = document.getElementById("radios");
  var labels = radios.getElementsByTagName("label");
  
  for(var i = 0; i < labels.length; i++) {
    if(labels[i].textContent === color) {
      labels[i].click();
    }
  }
}
</script>

</body>
</html>
意訳
 



テキストボックス
テキストボックスにサジェストするリスト
blue
green


formを配置する
blueのラジオボタン
greenのラジオボタン


ここからJavaScript
idが"color"の値が変わったらselectRadioを実行する

この機能がやること
idが"color"の値を取得する
idが"radios"の要素を取得して
その中のlabel要素を取得する

label要素の数だけ繰り返す
label要素のテキストがcolorと同じなら
label要素をクリックする










Latest post

Google Workspace Business版でプロフィール画像を変更できるようにしたい

Google Workspace Business版でプロフィール画像を設定後、画像を変えられない場合 Admin console のDirectory の中にある Profile Picture をチェックしてみる Adminアカウントで  https://admin.goog...