Question

我在javascript和google脚本方面非常新。我有两个下拉菜单，第一个下拉菜单包含国家/地区的地区名称，第二个下拉菜单应使用第一个下拉列表中相应选定区域的商店代码填充。区域名称（一列）和商店代码（每个区域几列）在Google工作表中。当用户从第一个下拉列表中选择一个区域时，我不知道如何填充第二个下拉列表。在这种情况下，我不太清楚如何连接javascript和html对象（这里是第二个下拉列表）。谢谢;

我在网上搜索了答案。我发现问题/答案与我的问题非常相似。但是，在大多数情况下，第一个和第二个下拉列表在客户端填充，而在服务器端填充。某些地区的商店数量很多，我希望保持客户端代码不太混乱。

以下是Google工作表的一部分。此部分在电子表格“测试”中，在工作表中为“ Sheet1”。

All     Stores in   Stores in   Stores in
Regions:    (R1)        (R2)        (R3)
     R1       S1         S1          S5
     R2       S2         S3          S7
     R3       S3         S4          S51
              S4         S5          S453
              S5         S6          S675
              S6         S7          S23
              S7         S8          S56
              S8         S9          S78
              S9         S10         S455
              S10        S11         S1001
              S12        S34
              S13       
              S14       
              S15       
              S16       
              S17       
              S18       
              S19       
              S20       
              S21       
              S22       

Index.html
<!DOCTYPE html>
<html>
<head>
    <base target="_top">
    <meta name="viewport" content="width=divice-width, initial- 
    scale=1.0"/>
    <?!=include("Index-css")?>

</head>

<body>
 </div>
 <div class="middlepane">
     <br><label style="font-weight:bold; margin-left:10px;"><font 
     size="4">Region:</font></label><select id="region" style="margin- 
     left:10px;" onchange="storesCode()"><option 
     selected>None</option>
     <?!= list;?>
     </select><br>
     <br><lable style="font-weight:bold; margin-left:10px;"><font 
     size="4">Store Code:</font></lable><select id="StoreCode" 
     style="margin-left:10px;"><option selected>None</option>
     <?!=HtmlStoreList;?>
     </select><br>
<script>
        Function RegionChange(HtmlStoreList){
        var regionIndex = 
        document.getElementById("region").selectedIndex;

        }
        google.script.run.withSuccessHandler(RegionChange)
        .StoreCode();
</script>

</body>
</html> 

Code.gs
function doGet(e){


 var ss = SpreadsheetApp.openByUrl(url);
 var ws = ss.getSheetByName("Sheet1");
 var RegionList = ws.getRange(3, 4, 
 ws.getRange("D3").getDataRegion().getLastRow()-2,1).getValues();
 var HtmlRegionList = RegionList.map(function(r){return '<option>' + r[0] 
 +'</option>';}).join("");
 var temp1 = HtmlService.createTemplateFromFile("Index");
 temp1.list = HtmlRegionList;
 return temp1.evaluate();
  }

 function StoreCode(){
 var ss = SpreadsheetApp.openByUrl(url);
 var ws = ss.getSheetByName("Sheet1");

  if (regionIndex == 1) {
  var StoreList = ws.getRange(3, 6, 
  ws.getRange("F3").getDataRegion().getLastRow()-2,1).getValues();
  var HtmlStoreList = StoreList.map(function(r){return '<option>' + r[0] 
  + '</option>';}).join("");  
  return HtmlStoreList;
   } else if (regionIndex == 2) {
   var StoreList = ws.getRange(3, 8, 
   ws.getRange("H3").getDataRegion().getLastRow()-2,1).getValues();
   var HtmlStoreList = StoreList.map(function(r){return '<option>' + r[0] 
   + '</option>';}).join("");  
   return HtmlStoreList; } else {
   var StoreList = ws.getRange(3, 11, 
   ws.getRange("J3").getDataRegion().getLastRow()-2,1).getValues();
   var HtmlStoreList = StoreList.map(function(r){return '<option>' + r[0] 
   + '</option>';}).join("");  
   return HtmlStoreList;}


  I expected by selecting the different regions from the first drop-down 
  the second drop-down be populated with the list of store cods 
  corresponding to the region selected.

如何使用javascript和google sheet根据第一个下拉列表中的选择填充第二个下拉列表

0 个答案: