如何将元素值变量从 Javascript html 文件传递到 google apps 脚本中的 code.gs 文件？

Question

我有两个下拉列表，一个依赖于另一个。 当用户从第一个列表中选择一个选项时，第二个下拉列表会从 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 文件中，但它返回了一个错误。

由于我是编码新手，所以我迷路了，无法弄清楚应该如何正确完成。 提前致谢。

Answer 1

这个例子做同样的事情。 它具有三个相关的下拉菜单。

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')
}

如何将元素值变量从 Javascript html 文件传递到 google apps 脚本中的 code.gs 文件？

问题描述

1 个解决方案

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

如何将元素值变量从 Javascript html 文件传递到 google apps 脚本中的 code.gs 文件？

问题描述

1 个解决方案

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

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