LANG SELRCT

コードを書く場所

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










最新の投稿

デフォルトのGCPプロジェクトを標準のGCPプロジェクトに切り替えたい

Google Apps ScriptではデフォルトのGCPプロジェクトを標準のGCPプロジェクトに切り替えることができる。 順を追ってやってみたので、ステップ化して書き残しておきます。 STEP1 標準のGCPプロジェクトについて確認する まずは、Standard Cloud ...