LANG SELRCT

Google Apps Scriptのコードを書く場所  (新規作成: スプレッドシート | スクリプトエディタ

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要素をクリックする










最新の投稿

Pixel 5でSuicaが使えないときはGoogle PayでSuicaを有効にしてみる

Pixel 5への機種変でSuicaが使えない人向けに書きました。 MISSION Pixel 5でSuicaを使えるようにする SOLUTION 旧端末で機種変更の設定を行う NFCをオンにする Google PayでSuicaを有効にする PROBLEMS 以前...