从谷歌脚本过滤下拉值

【问题标题】：Filtered Dropdown value from Google Script从谷歌脚本过滤下拉值
【发布时间】：2021-11-11 10:23:43
【问题描述】：

在此post 之后，我想在用户选择下拉选项时更改 HTML 下拉列表中的数据。 在这里，我想根据用户选择的字段过滤数据。不同的是，过滤后是在一个 GS 文件中。

编辑：简而言之，我想和之前的帖子一样，但有两个参数

这是我的代码。

谷歌脚本

// uniqueContractScopeData, uniqueAcTypeData and uniqueCustomerData are tables of Strings.
They send the expected data.

function get_joCustomer() {
  var jo = {};
  var dataArray = [];
  for (var i=0; i < uniqueCustomerData.length; i++ ) {
    var record = {};
    record['customer'] = uniqueCustomerData[i];
    dataArray.push(record);
  }
  jo.user = dataArray;
  return JSON.stringify(jo);
}

function get_joContractScope() {
  var jo = {};
  var dataArray = [];
  for( var i=0; i < uniqueContractScopeData.length; i++ ) {
    var record = {};
    record['contractScope'] = uniqueContractScopeData[i];
    dataArray.push(record);
  }
  jo.user = dataArray;
  return JSON.stringify(jo);
}

function get_joAcType() {
  var jo = {};
  var dataArray = [];
  for( var i=0; i < uniqueAcTypeData.length; i++ ) {
    var record = {};
    record['acType'] = uniqueAcTypeData[i];
    dataArray.push(record);
  }
  jo.user = dataArray;
  return JSON.stringify(jo);
}

// Work
function processGet_jo(element, returnedAssociatedData) {
  var uniqueData = getUniqueAssociatedElement(element, returnedAssociatedData); // Returns expected result which is a table of Strings
  var jo = {};
  var dataArray = [];
  var result;
  for (var i=0; i < uniqueData.length; i++ ) {
    var record = {};
    record[returnedAssociatedData] = uniqueData[i];
    dataArray.push(record);
  }
  jo.user = dataArray;
  return JSON.stringify(jo);
}

.html

    <html>
      <head>
        <base target="_top">
      </head>
    
      <body>
    
        <!-- form -->
        <form id="filterForm" onChange="displayAppropriatedValues(this)" onSubmit="handleFormSubmitFilter(this)">
    
        <label for="customer"> Customer </label><br/>
        <select id="customer" name="customer">
          <option selected></option><br/>
        </select><br/><br/>
    
          <label for="contractScope"> Contract Scope </label><br/>
          <select name="contractScope" id="contractScope">
            <option selected></option><br/>
          </select><br/><br/>
         
          <label for="acType"> AC Type </label><br/>
          <select multiple id="acType" name="acType">
            <option></option><br/>
          </select><br/><br/>
    
          <button type="submit"> Submit </button>
        </form>
    
        <script>


//When the form is opened, dropdown options are generated. No problems here
    
    var customerHtml = document.getElementById("customer");
    var customerHtmlValue = customerHtml.options[customerHtml.selectedIndex].value;
    var contractScopeHtml = document.getElementById("contractScope");
    var contractScopeHtmlValue = contractScopeHtml.options[contractScopeHtml.selectedIndex].value;
    var acTypeHtml = document.getElementById("acType");
    var acTypeHtmlValue = contractScopeHtml.options[contractScopeHtml.selectedIndex].value;
    
            (function () {
              google.script.run.withSuccessHandler(
                function(value) {
                  var jo = JSON.parse(value);             
                  for(var i=0; i < jo.user.length-1; i++) {
                    var user = jo.user[i];
                    var option = document.createElement("option");
                    option.text = user.customer;
                    option.value = option.text;
                    customerHtml.add(option);
                  }
                }
              ).get_joCustomer();
    
              google.script.run.withSuccessHandler(
                function(value) {
                  var jo = JSON.parse(value);
                  for( var i=0; i < jo.user.length-1; i++ ) {
                    var user = jo.user[i];
                    var option = document.createElement("option");
                    option.text = user.contractScope;
                    option.value = option.text;
                    contractScopeHtml.add(option);
                  }
                }
              ).get_joContractScope();
    
              google.script.run.withSuccessHandler(
                function(value) {
                  var jo = JSON.parse(value);
                  for( var i=0; i < jo.user.length-1; i++ ) {
                    var user = jo.user[i];
                    var option = document.createElement("option");
                    option.text = user.acType;
                    option.value = option.text;
                    acTypeHtml.add(option);
                  }
                }
              ).get_joAcType();
            }());
  
  
          function displayAppropriatedValues(form) {
    
            if (customer.value == "A") {
    
              // Delete all options
              var L = contractScopeHtml.options.length;
              for(var i = L; i >= 1; i--) {
                  contractScopeHtml.remove(i);
              } // Work


    //The problem is here. The customerHtmlValue and returnedAssociatedData parameters are not recognised at the end of the function.
        (function () {
              google.script.run.withSuccessHandler(
                function(value) {
                  var jo = JSON.parse(value);
                  for( var i=0; i < jo.user.length-1; i++ ) {
                    var user = jo.user[i];
                    var option = document.createElement("option");
                    option.text = user.returnedAssociatedData;
                    option.value = option.text;
                    contractScopeHtml.add(option);
                  }
                }
              ).processGet_jo(customerHtmlValue, "contractScope");
            }());
        }
    </script>

如果您需要更多信息，请告诉我。

提前致谢

Ziganotschka 解决方案后：

gs

function processGet_jo(element, returnedAssociatedData) {
  console.log("element: " + element);
  console.log("returnedAssociatedData: " + returnedAssociatedData);
  var uniqueData = [];
  uniqueData.push(getUniqueAssociatedElement(element, returnedAssociatedData));
  var jo = {};
  var dataArray = [];
  for (var i=0; i < uniqueData.length; i++ ) {
    var record = {};
    record[returnedAssociatedData] = uniqueData[i];
    dataArray.push(record);
  }
  jo.user = dataArray;
  return JSON.stringify(jo);
}

function doGet(element){
  return HtmlService.createTemplateFromFile("FormFilter").evaluate();
}

html

<html>
  <head>
    <base target="_top">
  </head>

  <body>

    <!-- form -->
    <form id="filterForm" onSubmit="handleFormSubmitFilter(this)">

    <label for="customer"> Customer </label><br/>
    <select id="customer" name="customer" onChange="getcustomerHtmlValue()">
      <option selected></option><br/>
    </select><br/><br/>

      <label for="contractScope"> Contract Scope </label><br/>
      <select name="contractScope" id="contractScope">
        <option selected></option><br/>
      </select><br/><br/>
     
      <label for="acType"> AC Type </label><br/>
      <select multiple id="acType" name="acType">
        <option></option><br/>
      </select><br/><br/>
    </form>
</body>
</html>

    <script>
    var customerHtml = document.getElementById("customer");
        var customerHtmlValue = customerHtml.options[customerHtml.selectedIndex].value;
        var contractScopeHtml = document.getElementById("contractScope");
        var contractScopeHtmlValue = contractScopeHtml.options[contractScopeHtml.selectedIndex].value;
        var acTypeHtml = document.getElementById("acType");
        var acTypeHtmlValue = contractScopeHtml.options[contractScopeHtml.selectedIndex].value;
    
    function getcustomerHtmlValue() {
        google.script.run.withSuccessHandler(
          function(value) {
            console.log("value: " + value);
            var jo = JSON.parse(value);
            for (var i=0; i < jo.user.length-1; i++) { 
              var user = jo.user[i];
              var option = document.createElement("option");
              option.text = user.contractScope;
              option.value = option.text;
              contractScopeHtml.add(option);
            }
          }
        ).processGet_jo(customerHtmlValue, "contractScope");
      }
</script>

【问题讨论】：

  • 究竟是什么不适合您？如果没有完整的代码和/或示例数据，很难重现。
  • 问题出在最后一个 .html 脚本函数中。用 ".processGet_jo(customerHtmlValue, "contractScope"); 调用的两个参数不被识别（之前的函数正常工作）。没有错误消息但没有任何反应
  • 你的意思是那些参数没有从html正确传递到code.gs？您是否尝试记录它们？
  • 我检查了警报，参数对除此之外的所有功能都很好。如果我理解的话，ProcessGet_jo() 会带来在 google.script.run.withSuccessHandler() 中处理的数据。但是数据不来是因为参数不识别
  • 据我所知，变量returnedAssociatedData 未在代码中的任何位置定义。

标签： javascript json forms google-apps-script


【解决方案1】：

你的函数被调用得太早了

语法(function () {...}())会在页面加载时直接执行函数内容。

在您的情况下，您可能希望在将所选值传递给 code.gs 之前从客户下拉列表中选择一个值。

您可以通过例如给这个函数起个名字，然后叫它onChange。

这个测试 sn-p 对我有用：

code.gs

function doGet(e){
  return HtmlService.createTemplateFromFile("html").evaluate();
}
function processGet_jo(element, returnedAssociatedData) {
  console.log("element: " + element)
  console.log("returnedAssociatedData: " + returnedAssociatedData)
  // do something
  return JSON.stringify("success");
}

html.html

<!DOCTYPE html>
<html>
  <head>
    <base target="_top">
  </head>
  <body>
     <html>
      <head>
        <base target="_top">
      </head>
    
      <body>
    
        <!-- form -->
        <form id="filterForm" onChange="displayAppropriatedValues(this)" onSubmit="handleFormSubmitFilter(this)">
    
        <label for="customer"> Customer </label><br/>
        <select id="customer" name="customer" onchange="getcustomerHtmlValue()">
          <option selected>1</option><br/>
          <option>2</option><br/>
        </select><br/><br/>   
          <button type="submit"> Submit </button>
        </form>
    
        <script>       
            function getcustomerHtmlValue(){
              var customerHtml = document.getElementById("customer");
              var customerHtmlValue = customerHtml.options[customerHtml.selectedIndex].value;
              google.script.run.withSuccessHandler(
                function(value) {
                console.log("value: " + value);
                // do something
                }
              ).processGet_jo(customerHtmlValue, "contractScope");
           }        
    </script>
  </body>
</html>
  • 或者，您也可以在表单提交而不是更改时调用该函数。

【讨论】：

  • 感谢您的回答。那可能是另一种可能性。在我的代码中未检测到元素值。 console.log("值：" + 值);是空的。 gs 部分有效。问题是 html 方面的。我编辑我的代码以向您展示修改
  • 如果我替换 ").processGet_jo(customerHtmlValue, "contractScope");" by ").processGet_jo("A", "contractScope");"元素日志有效，但脚本无效。
  • 您好，有什么办法可以纠正这个错误吗？
  • 在将JSON.stringify(jo) 从服务器端返回到客户端之前，您是否尝试记录它？
  • 是的，它返回 "{"user":[{"contractScope":["value1","value2"]}]}" 值 1 和 2 是预期值。这里没有问题
猜你喜欢
  • 1970-01-01
  • 1970-01-01
  • 2021-04-14
  • 1970-01-01
  • 1970-01-01
  • 2018-02-11
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
相关资源
最近更新 更多
热门标签
Java Python linux javascript Mysql C# Docker 算法 前端 SpringBoot Redis Vue spring 设计模式 .net core .net kubernetes c++ 数据库 数据结构 大数据 js 机器学习 微服务 Android Go 程序员 面试 JVM ASP.net core 云原生 人工智能 后端 PHP git CSS golang k8s Nginx Django mybatis 深度学习 多线程 React 架构 devops 爬虫 云计算 Spring Boot LeetCode