为什么我的下拉选项没有以可靠的形式显示？使用谷歌应用程序脚本、Html&；JavaScript_Javascript_Google Apps Script_Google Sheets_Web Applications

为什么我的下拉选项没有以可靠的形式显示？使用谷歌应用程序脚本、Html&；JavaScript

javascript google-apps-script google-sheets web-applications

为什么我的下拉选项没有以可靠的形式显示？使用谷歌应用程序脚本、Html&；JavaScript,javascript,google-apps-script,google-sheets,web-applications,Javascript,Google Apps Script,Google Sheets,Web Applications,代码应用程序脚本：函数doGet（e）{ var htmlOutput=HtmlService.createTemplateFromFile（'ReliableSelect'）； var states=getStates（）； var cities=getCities（）； var outlets=getOutlets（）； htmlOutput.message=''； htmlOutput.states=状态； htmlOutput.cities=城市； htmlOutput.outlet

代码应用程序脚本：

函数doGet（e）{
var htmlOutput=HtmlService.createTemplateFromFile（'ReliableSelect'）；
var states=getStates（）；
var cities=getCities（）；
var outlets=getOutlets（）；
htmlOutput.message=''；
htmlOutput.states=状态；
htmlOutput.cities=城市；
htmlOutput.outlets=出口；
返回htmlOutput.evaluate（）；
}
函数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（姓名、州、市）；
var htmlOutput=HtmlService.createTemplateFromFile（'DependentSelect'）；
var states=getStates（）；
htmlOutput.message='Record Added'；
htmlOutput.states=状态；
htmlOutput.cities=城市；
返回htmlOutput.evaluate（）；
}
函数getStates（）{
var ss=SpreadsheetApp.getActiveSpreadsheet（）；
var sheet=ss.getSheetByName（“基”）；
//var getLastRow=lovSheet.getLastRow（）；
//var getRange=sheet.getRange（2,3,26,1）；
var getRangeLastRow=sheet.getLastRow（）；
Logger.log（getRangeLastRow）；
var返回_数组=[]；
对于（var i=2；i我在web应用程序和html方面不是专家，但以下是我的一些观察结果以及我如何修复您的代码：
选择状态后，状态下拉列表不断重置的原因是您正在重新设置其选项值。此外，当您选择状态时，您在onchange
中调用了GetStates（）
，这将向下拉列表中添加选项
选择州时，应触发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>

在GetCities（state）
和GetOutlets（state，city）
中，您正在传递一个html元素作为GetCities（state）
和GetOutlets（state，city）
的参数。您应该传递该元素的值
最后，在getCities（state）

更新代码.gs
函数getCities（state）{
//state='Haryana'//测试后移除
var ss=SpreadsheetApp.getActiveSpreadsheet（）；
var sheet=ss.getSheetByName（“基”）；
var getRangeLastRow=sheet.getLastRow（）；；
var返回_数组=[]；
对于（var i=2；i

输出：
谢谢您的友好回复。这是一个非常好的回答。我非常感谢您的帮助。我学到了一些非常有用的东西。
window.onload = GetStates;

Example: getCities(state.value)

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;  
}

<!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>