为什么我的下拉选项没有以使用 Google Apps 脚本、Html 和 JavaScript 完成的可靠形式显示

Question

This is google sheets with data, Workign sheet name is "Base", Columns - Outlet Name, Indian State Name, City are required to be populated within web app form. When State is selected, cities within that states are to displayed in the city drop-down, similarly when a city is selected, outlets within that city should be populated in the last drop-down menu.

CODE 应用程序脚本：

function doGet(e) {
  var htmlOutput =  HtmlService.createTemplateFromFile('DependableSelect');
  var states = getStates();
  var cities = getCities();
  var outlets = getOutlets();
  htmlOutput.message = '';
  htmlOutput.states = states;
  htmlOutput.cities = cities;
  htmlOutput.outlets = outlets;
  return htmlOutput.evaluate();
}

function doPost(e) {
  
  Logger.log(JSON.stringify(e));
  
  var name = e.parameters.name.toString();
  var state = e.parameters.state.toString();
  var city = e.parameters.city.toString();
  var outlet = e.parameters.outlet.toString();
  
  AddRecord(name, state, city);
  
  var htmlOutput =  HtmlService.createTemplateFromFile('DependentSelect');
  var states = getStates();
  htmlOutput.message = 'Record Added';
  htmlOutput.states = states;
  htmlOutput.cities = cities;
  return htmlOutput.evaluate(); 
  
}

function getStates() { 
  var ss= SpreadsheetApp.getActiveSpreadsheet();
  var sheet = ss.getSheetByName("Base"); 
  //var getLastRow = lovSheet.getLastRow();
  // var getRange =  sheet.getRange(2, 3, 26, 1);
  var getRangeLastRow =  sheet.getLastRow();
  Logger.log(getRangeLastRow);
  var return_array = [];
  for(var i = 2; i <= getRangeLastRow; i++)
  {
      if(return_array.indexOf(sheet.getRange(i, 2).getValue()) === -1) {
        return_array.push(sheet.getRange(i, 2).getValue());
      }
  }

  Logger.log(return_array);
  return return_array;  
}

function getCities(state) { 
  //  state ='Haryana' //remove after test
  var ss= SpreadsheetApp.getActiveSpreadsheet();
  var sheet = ss.getSheetByName("Base"); 
  var getRangeLastRow =   sheet.getLastRow();;
  var return_array = [];
  for(var i = 2; i <= getRangeLastRow; i++)
  {
      if(sheet.getRange(i, 2).getValue() === state) {
        return_array.push(sheet.getRange(i, 7).getValue());
      }
  }

  Logger.log(return_array);
  return return_array;  
}


function getOutlets(state, city) { 
  // state ='Haryana' //remove after test
  // city ='Gurgaon-122107' //remove after test
  var ss= SpreadsheetApp.getActiveSpreadsheet();
  var sheet = ss.getSheetByName("Base"); 
  var getRangeLastRow =   sheet.getLastRow();;
  var return_array = [];
  for(var i = 2; i <= getRangeLastRow; i++)
  {
      if(sheet.getRange(i, 2).getValue() === state) {
         if(sheet.getRange(i, 7).getValue() === city) {
        return_array.push(sheet.getRange(i, 1).getValue());
      }
      }
  }

  Logger.log(return_array);
  return return_array;  
}


function AddRecord(name, color, fruit) {
  var url = '';   //URL OF GOOGLE SHEET;
  var ss= SpreadsheetApp.openByUrl(url);
  var dataSheet = ss.getSheetByName("DATA");
  dataSheet.appendRow([name, color, fruit, new Date()]);
}

function getUrl() {
 var url = ScriptApp.getService().getUrl();
 return url;
}

代码 HTML:

<!DOCTYPE html>
<html>
  <head>
    <base target="_top">
  
   <script>
    function GetStates() 
    {
    
    google.script.run.withSuccessHandler(function(ar) 
    {

    console.log(ar);
    
    state.length = 0;
    
    let option = document.createElement("option");
    option.value = "";
    option.text = "";
    state.appendChild(option);
    
    ar.forEach(function(item, index) 
    {    
      let option = document.createElement("option");
      option.value = item;
      option.text = item;
      state.appendChild(option);    
    });
    
    }).getStates();
    
    };
  </script>  

   <script>
    function GetCities(state) 
    {
     state = document.getElementById('state');
    google.script.run.withSuccessHandler(function(ar) 
    {

    console.log(ar);
    
    city.length = 0;
    
    let option = document.createElement("option");
    option.value = "";
    option.text = "";
    city.appendChild(option);
    
    ar.forEach(function(item, index) 
    {    
      let option = document.createElement("option");
      option.value = item;
      option.text = item;
      city.appendChild(option);    
    });
    
    }).getCities(state);
    
    };
  </script>  
  

 <script>
    function GetOutlets(state,city) 
    {
    state = document.getElementById('state');
    city = document.getElementById('city');
    google.script.run.withSuccessHandler(function(ar) 
    {

    console.log(ar);
    
    outlet.length = 0;
    
    let option = document.createElement("option");
    option.value = "";
    option.text = "";
    outlet.appendChild(option);
    
    ar.forEach(function(item, index) 
    {    
      let option = document.createElement("option");
      option.value = item;
      option.text = item;
      outlet.appendChild(option);    
    });
    
    }).getOutlets(state,city);
    
    };
  </script>  


 

  </head>
  <body>
    <h1>Web App Dependent Drop Down</h1>
    <?var url = getUrl();?>
    <form method="post" action="<?= url ?>" >
      <label style="font-size: 20px" >Name</label><br>
      <input type="text" name="name" style="font-size: 20px" /><br><br>
      <label style="font-size: 20px" >States</label><br>
      <select name="state" id="state" style="font-size: 20px" onchange="GetStates()" >
      <option value="" ></option>
      <? for(var i = 0; i < states.length; i++) { ?>      
      <option value="<?= states[i] ?>" ><?= states[i] ?></option>
      <? } ?>
      </select><br><br>
      <label style="font-size: 20px" >City</label><br>
      <select name="city" id="city" style="font-size: 20px" onchange="GetCities(this.value)" >
      <option value="" ></option>
      <? for(var i = 0; i < cities.length; i++) { ?>      
      <option value="<?= cities[i] ?>" ><?= cities[i] ?></option>
      <? } ?>
      </select><br><br>
      <label style="font-size: 20px" >Outlets</label><br>
      <select name="outlet" id="outlet" style="font-size: 20px" onchange="GetOutlets(this.value)" >
      <option value="" ></option>
      <? for(var i = 0; i < outlets.length; i++) { ?>      
      <option value="<?= outlets[i] ?>" ><?= outlets[i] ?></option>
      <? } ?>
      </select><br><br>
      <input type="submit" name="submitButton" value="Submit" style="font-size: 20px" /> 
      <span style="font-size: 20px" ><?= message ?></span>      
    </form>


  </body>
</html>

我是应用程序 sctip 和 google 表格内容的新手。如果我提出了愚蠢的问题，我很抱歉。

Answer 1

我不是网络应用方面的专家，html但以下是我的一些观察结果以及我如何修复您的代码：

您的状态下拉列表在您 select 一个状态后不断重置的原因是因为您再次设置了它的选项值。此外，当您 select 一个状态时，您在 onchange 中调用了 GetStates()，这将向您的下拉列表添加选项。

当你select一个州时，你应该触发GetCities(state)更新城市下拉列表

<select name="state" id="state" style="font-size: 20px" onchange="GetStates()" >
<option value="" ></option>
<? for(var i = 0; i < states.length; i++) { ?>      
<option value="<?= states[i] ?>" ><?= states[i] ?></option>
<? } ?>
</select><br><br>

“城市”下拉列表也是如此。当您 select 一个城市时，您将调用 GetCities(state)，这将再次更新城市选项。

当你select一个城市时，你应该触发GetOutlets(state,city)更新outlet下拉列表

对于 Outlets 下拉菜单，无需 call/set 函数，因为它是最后一个需要更新的下拉菜单。
如果你想知道我们什么时候更新状态，它应该在你打开 window 时更新。您可以使用此代码执行该操作

window.onload = GetStates;

在 GetCities(state) 和 GetOutlets(state,city) 中，您传递一个 html 元素作为 getCities(state) 和 getOutlets(state,city) 的参数。您应该改为传递元素的值。

Example: getCities(state.value)

最后，您在 getCities(state)

已更新Code.gs

function getCities(state) { 
  //  state ='Haryana' //remove after test
  var ss= SpreadsheetApp.getActiveSpreadsheet();
  var sheet = ss.getSheetByName("Base"); 
  var getRangeLastRow =   sheet.getLastRow();;
  var return_array = [];
  for(var i = 2; i <= getRangeLastRow; i++)
  {
      if(sheet.getRange(i, 2).getValue() === state) {
        if(return_array.indexOf(sheet.getRange(i, 7).getValue()) === -1) {
          return_array.push(sheet.getRange(i, 7).getValue());
        }
      }
  }

  Logger.log(return_array);
  return return_array;  
}

已更新DependableSelect.html

<!DOCTYPE html>
<html>
  <head>
    <base target="_top">
  
   <script>
    function GetStates() 
    {
    
    google.script.run.withSuccessHandler(function(ar) 
    {

    console.log(ar);
    
    state.length = 0;
    
    let option = document.createElement("option");
    option.value = "";
    option.text = "";
    state.appendChild(option);
    
    ar.forEach(function(item, index) 
    {    
      let option = document.createElement("option");
      option.value = item;
      option.text = item;
      state.appendChild(option);    
    });
    
    }).getStates();
    
    };

    function GetCities(state) 
    {
      state = document.getElementById('state');
    google.script.run.withSuccessHandler(function(ar) 
    {

    console.log(ar);
    
    city.length = 0;
    
    let option = document.createElement("option");
    option.value = "";
    option.text = "";
    city.appendChild(option);
    
    ar.forEach(function(item, index) 
    {    
      let option = document.createElement("option");
      option.value = item;
      option.text = item;
      city.appendChild(option);    
    });
    
    }).getCities(state.value);
    
    };


    function GetOutlets(state,city) 
    {
    state = document.getElementById('state');
    city = document.getElementById('city');
    google.script.run.withSuccessHandler(function(ar) 
    {

    console.log(ar);
    
    outlet.length = 0;
    
    let option = document.createElement("option");
    option.value = "";
    option.text = "";
    outlet.appendChild(option);
    
    ar.forEach(function(item, index) 
    {    
      let option = document.createElement("option");
      option.value = item;
      option.text = item;
      outlet.appendChild(option);    
    });
    
    }).getOutlets(state.value,city.value);
    
    };

    window.onload = GetStates;
  </script>  


 

  </head>
  <body>
    <h1>Web App Dependent Drop Down</h1>
    <?var url = getUrl();?>
    <form method="post" action="<?= url ?>" >
      <label style="font-size: 20px" >Name</label><br>
      <input type="text" name="name" style="font-size: 20px" /><br><br>
      <label style="font-size: 20px" >States</label><br>
      <select name="state" id="state" style="font-size: 20px" onchange="GetCities(this.value)" >
      </select><br><br>
      <label style="font-size: 20px" >City</label><br>
      <select name="city" id="city" style="font-size: 20px" onchange="GetOutlets(this.value)" >
      </select><br><br>
      <label style="font-size: 20px" >Outlets</label><br>
      <select name="outlet" id="outlet" style="font-size: 20px" >
      </select><br><br>
      <input type="submit" name="submitButton" value="Submit" style="font-size: 20px" /> 
      <span style="font-size: 20px" ><?= message ?></span>      
    </form>


  </body>
</html>

为什么我的下拉选项没有以使用 Google Apps 脚本、Html 和 JavaScript 完成的可靠形式显示

Why my dropdown options are not displayed in a dependable form done using Google Apps Script, Html & JavaScript

javascript

web-applications

google-sheets

google-apps-script

已更新Code.gs

已更新DependableSelect.html

输出：