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

Question

I have two dropdown lists, one is dependent on the other.我有两个下拉列表，一个依赖于另一个。 When the user selects an option from the first list, the second dropdown list populates its items options from google SpreadSheet array (based on filter and map properties).当用户从第一个列表中选择一个选项时，第二个下拉列表会从 google SpreadSheet 数组（基于过滤器和 map 属性）填充其项目选项。

The question is: How can I pass the element value from an Html script file to google apps script code.gs file so I can filter the second dropdown list depending on the selection chosen by the user from the first list?问题是：如何将元素值从 Html 脚本文件传递到 google apps 脚本code.gs文件，以便我可以根据用户从第一个列表中选择的选择来过滤第二个下拉列表？

ReceivePayment-js.html file: 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>

Code.gs file:代码.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();         
       }

Consol.html file:控制台.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>

I have tried so far to put到目前为止我已经尝试过

document.getElementById("reference").value;

inside Code.gs file but it returned an error.在 Code.gs 文件中，但它返回了一个错误。

Since I am new to coding, I got lost and can't figure out how it should be done properly.由于我是编码新手，所以我迷路了，无法弄清楚应该如何正确完成。 Thanks in advance.提前致谢。

Answer 1

This example does the same thing.这个例子做同样的事情。 It has three dependant dropdowns.它具有三个相关的下拉菜单。

html: 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: 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>

code.gs:代码.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