堆棧內存溢出
  簡體   English   中英

如何將元素值變量從 Javascript html 文件傳遞到 google apps 腳本中的 code.gs 文件？

[英]How to pass an element-value variable from Javascript html file to code.gs file in google apps script?

 原文  2020-04-13 18:28:57  6   1    javascript/ google-apps-script

問題描述

我有兩個下拉列表，一個依賴於另一個。 當用戶從第一個列表中選擇一個選項時，第二個下拉列表會從 google SpreadSheet 數組（基於過濾器和 map 屬性）填充其項目選項。

問題是：如何將元素值從 Html 腳本文件傳遞到 google apps 腳本code.gs文件，以便我可以根據用戶從第一個列表中選擇的選擇來過濾第二個下拉列表？

ReceivePayment-js.html文件：

  <script>

   document.addEventListener('DOMContentLoaded', function() {
   var elems = document.querySelectorAll('select');
   var instances = M.FormSelect.init(elems);
   });

   document.getElementById("btn").addEventListener("click",populateData);             
   document.getElementById("reference").addEventListener("onchange",dropDown);     


   //Trying to pass this directly below variable that contains the value of Reference dropdown-list 
   //(onchange event listener) to code.gs file inside doGet function 
   //where my lists coded to be created dynamically and evaluated.

   function dropDown(){
   var selectedRef =  document.getElementById("reference").value;
   }

</script>

代碼.gs文件：

function doGet(e){
       var ss = SpreadsheetApp.openByUrl(url);
       var ws = ss.getSheetByName("Account lists");

       var receivePaymentTemp = HtmlService.createTemplateFromFile("Consol");  
       receivePaymentTemp.title = "Receive Payment";  

       var bankAcountsList = ws.getRange(2,6,ws.getRange("F2").getDataRegion().getLastRow()-1,1).getValues();
       var htmlBankAcountList = bankAcountsList.map(function(r){ return '<option>' + r[0] + '</option>'; }).join('');
       receivePaymentTemp.bankAcountsList = htmlBankAcountList

       var receivePaymentRef = ws.getRange(2,8,ws.getRange("H2").getDataRegion().getLastRow()-1,1).getValues();
       var htmlreceivePaymentRef = receivePaymentRef.map(function(r){ return '<option>' + r[0] + '</option>'; }).join('');
       receivePaymentTemp.receivePaymentRef = htmlreceivePaymentRef



       var chartOfAccounts =  ws.getRange(2, 1,ws.getRange("A1").getDataRegion().getLastRow()-1,2).getValues();
//Here where I need to get the value of document.getElementById("reference").value from the other side
//(ReceivePayment-js.html) and put it inside referenceBox variable as I obviously didn't succeed 
           var referenceBox = ""
           var filteredReference = chartOfAccounts.filter(function(item){ return item[0] === referenceBox; });
           var htmlfilteredCustomer = filteredReference.map(function(acN){ return '<option>' + acN[1] + '</option>'; });
           receivePaymentTemp.chartOfAccounts = htmlfilteredCustomer

       return receivePaymentTemp.evaluate();         
       }

控制台.html文件：

<div class="row">
      <div class="input-field col s6">
      <select id="creditAccount">
      <option disabled selected>Customer</option>
      <?!= chartOfAccounts; ?> 
      </select>
      </div>
      </div>
      </div>
      </form>
      </div>

到目前為止我已經嘗試過

document.getElementById("reference").value;

在 Code.gs 文件中，但它返回了一個錯誤。

由於我是編碼新手，所以我迷路了，無法弄清楚應該如何正確完成。 提前致謝。

1 個解決方案

解決方案1
 0  2020-04-13 19:39:29

這個例子做同樣的事情。 它具有三個相關的下拉菜單。

html：

<!DOCTYPE html>
<html>
  <head>
    <base target="_top">
    <?!= include('res') ?>
    <?!= include('css') ?>
  </head>
  <body>
    <h1>Select State, County and City</h1> 
    <br /><select id="selst" class="control" onChange="selectState();"> 
      <option value="" selected></option>
    </select>State
    <br /><select id="selco" class="control" onChange="selectCounty();"> 
      <option value="" selected></option>
    </select>County
    <br /><select id="selci" class="control" onChange="selectCity();"> 
      <option value="" selected></option>
    </select>City
    <div id="msg"><h2>Data Available from:</h2><p><a href="https://github.com/grammakov/USA-cities-and-states" target="_blank">https://github.com/grammakov/USA-cities-and-states</a></p></div> 
    <input type="button" value="Exit" onClick="google.script.host.close();" />
   <?!= include('script') ?>
  </body>
</html>

javascript：

<script>
  $(function(){
    $('#selst').css('background-color','#ffff00');
    google.script.run
    .withSuccessHandler(function(sObj){
      console.log(sObj.vA);
      updateSelectList(sObj);
    })
    .getStates();
  });

  function updateSelectList(sObj){
    var select = document.getElementById(sObj.id);
    select.options.length=1; 
    if(sObj.vA){
      for(var i=0;i<sObj.vA.length;i++)
      {
        select.options[i + 1] = new Option(sObj.vA[i],sObj.vA[i]);
      }
    }
    $('#' + sObj.id).css('background-color','#ffffff');
  }

  function selectState() {
    $('#selco').css('background-color','#ffff00');
    var state=$('#selst').val();
    google.script.run
    .withSuccessHandler(function(sObj){
      updateSelectList(sObj);
    })
    .getCounties(state);
  }

  function selectCounty() {
    $('#selci').css('background-color','#ffff00');
    var county=$('#selco').val();
    var state=$('#selst').val();
    google.script.run
    .withSuccessHandler(function(sObj) {
      updateSelectList(sObj);
    })
    .getCities(state,county);   
  }

  function selectCity() {
    //do nothing for now
  }
  console.log('My Code');
</script>

代碼.gs：

function onOpen() {
  menu();
}

function menu() {
  SpreadsheetApp.getUi().createMenu('My Tools')
  .addItem('Show Districts Dialog','showDistrictsDialog' )
  .addItem('Create Named Rage', 'jjeSUS1.createNamedRange')
  .addItem('Select Columns Skip Header', 'jjeSUS1.selectColumnsSkipHeader')
  .addItem('Update States Global', 'updateStatesGlobal')
  .addItem('Create States Sheets', 'createStateSheets')
  .addItem('Delete States Sheets', 'deleteStateSheets')
  .addItem('Make State Sheet County Column Headers', 'makeStateSheetCountyColumnHeaders')
  .addItem('Clean Globals', 'cleanGlobals')
  .addToUi();
}

function doGet() {
  return HtmlService.createTemplateFromFile('districts').evaluate();
}

function getStates() {
  var states=String(getGlobal('States')).split('~~~');
  var sObj={vA:states,id:'selst'};
  return sObj;
}

function getCounties(state) {
  var state=state || 'Colorado';
  var ss=SpreadsheetApp.openById(getGlobal('DataSSID'));
  var sh=ss.getSheetByName('USCities');
  var rg=sh.getDataRange();
  var vA=rg.getValues();
  var counties=[];
  for(var i=0;i<vA.length;i++) {
    if(vA[i][2]==state && counties.indexOf(vA[i][3])==-1) {
      counties.push(vA[i][3]);
    }
  }
  var sObj={vA:counties.sort(),id:'selco'};
  return sObj;
}

function getCities(state,county) {
  var ss=SpreadsheetApp.openById(getGlobal('DataSSID'));
  var sh=ss.getSheetByName('USCities');
  var rg=sh.getDataRange();
  var vA=rg.getValues();
  var cities=[];
  for(var i=0;i<vA.length;i++) {
    if(vA[i][2]==state && vA[i][3]==county && cities.indexOf(vA[i][4])==-1) {
      cities.push(vA[i][4]);
    }
  }
  var sObj={vA:cities.sort(),id:'selci'};
  return sObj;
}

function include(filename) {
  return HtmlService.createHtmlOutputFromFile(filename).getContent();
}

function showDistrictsDialog() {
  var userInterface=HtmlService.createTemplateFromFile('districts').evaluate();
  SpreadsheetApp.getUi().showModelessDialog(userInterface,'US Cities, Counties and States')
}

暫無
暫無

聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

相關問題 谷歌應用程序如何將數據從 html 文件發送到 code.gs 變量 Google Apps腳本，將兩個（變量）2個“變量”或“數組”從code.gs傳遞給index.html / Javascript 將數組從Code.gs傳遞到Javascript Google App腳本 在 Google App Script 中將變量從 Code.gs 傳遞到 html 使用 html 對話框中輸入字段的值使用 Google Apps 腳本在 code.gs 中進行 var 如何將變量從 Code.gs 傳遞到包含的腳本片段 從 code.gs Google App Script 內部獲取變量值到 Javascript 谷歌應用 json 數據從 code.gs 到 html 下拉列表 使用Google Apps腳本將對話框中輸入字段的值返回到code.gs中的var 如何使用 gs 文件中的變量作為 Google Apps 腳本中 HTML 文件的輸入值？
相關標簽
 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM