我用https://codewithcurt.com/create-dependent-drop-down-on-google-web-app/的代码制作了相关下拉列表.我需要对相同的问题输入多个条目,如图中所示:

enter image description here

It works and I get the intended responses. But it seems like the trigger function can only be used once. I meant, when I tried to use GetIslands(this.value) for the second line of entries, it didn't work. Here's how it's like when I tried to use GetIslands(this.value) repeatedly: enter image description here

当我为人员B Select 状态时,人员A的岛下拉列表已更改.

因此,我不得不多次重复相同的代码块(因此第二个条目是GetIslands2(this.value)).必须有一种不那么多余的方法来做这件事.有人能帮忙吗?提前感谢!

HTML&JAVASCRIPT

<label>State</label>
      <select id="state1" onchange="GetIslands(this.value)" required></div>
      <option value="" hidden>Select a state</option>
      <? for(var i = 0; i < states.length; i++) { ?>      
      <option value="<?= states[i] ?>" ><?= states[i] ?></option>
      <? } ?></select>

<label>Island</label>
    <select name="island" id="island1" required>
    <option value=""  hidden>Select a marine park</option>
    </select>

<label>State</label>
  <select id="state2" onchange="GetIslands2(this.value)" required></div>
  <option value="" hidden>Select a state</option>
  <? for(var i = 0; i < states.length; i++) { ?>      
  <option value="<?= states[i] ?>" ><?= states[i] ?></option>
  <? } ?></select>

<label>Island</label>
    <select name="island2" id="island2" required>
    <option value=""  hidden>Select a marine park</option>
    </select>

<script>
function GetIslands(state)
  {
  google.script.run.withSuccessHandler(function(ar) 
    {
    console.log(ar);
    
    island1.length = 0;
    
    let option = document.createElement("option");
    option.value = "";
    option.text = "Select an island";
    option.hidden = true;
    island1.appendChild(option);
    
    ar.forEach(function(item, index) 
    {    
      let option = document.createElement("option");
      option.value = item;
      option.text = item;
      island1.appendChild(option);    
    });
    
    }).getIslands(state);
  };

function GetIslands2(state)
  {
  google.script.run.withSuccessHandler(function(ar) 
    {
    console.log(ar);
    
    island2.length = 0;
    
    let option = document.createElement("option");
    option.value = "";
    option.text = "Select an island";
    option.hidden = true;
    island2.appendChild(option);
    
    ar.forEach(function(item, index) 
    {    
      let option = document.createElement("option");
      option.value = item;
      option.text = item;
      island2.appendChild(option);    
    });
    
    }).getIslands(state);
  };
</script>

应用程序脚本

function getState() { 
  var ss= SpreadsheetApp.getActiveSpreadsheet();
  var siteSheet = ss.getSheetByName("Sites"); 
  var getLastRow = siteSheet.getLastRow();
  var return_array = [];
  for(var i = 2; i <= getLastRow; i++)
  {
      if(return_array.indexOf(siteSheet.getRange(i, 1).getValue()) === -1) {
        return_array.push(siteSheet.getRange(i, 1).getValue());
      }
  }
  return return_array;  
}

function getIslands(state) { 
  var ss= SpreadsheetApp.getActiveSpreadsheet();
  var siteSheet = ss.getSheetByName("Sites"); 
  var getLastRow = siteSheet.getLastRow();
  var return_array = [];
  for(var i = 2; i <= getLastRow; i++)
  {
      if(siteSheet.getRange(i, 1).getValue() === state){
        return_array.push(siteSheet.getRange(i, 2).getValue());
      }
  }
  const unique = (value,index,self) => {return self.indexOf(value) ===index;}
  var Unique_List=return_array.filter(unique); 
  return Unique_List;  
}

推荐答案

我相信你的目标如下.

  • 更改state1时,值设置为island1.并且,当state2被改变时,值被设置为island2.在当前脚本中,为了实现这一点,需要使用GetIslandsGetIslands2这两个函数.
  • 在您的目标中,您希望仅使用函数GetIslands来实现这种情况.

在这种情况下,下面的修改如何?

修改的脚本:

在此修改中,您的显示HTML修改如下.

<label>State</label>
<select id="state1" onchange="GetIslands(this)" required></div>
<option value="" hidden>Select a state</option>
<? for(var i = 0; i < states.length; i++) { ?>      
<option value="<?= states[i] ?>" ><?= states[i] ?></option>
<? } ?></select>

<label>Island</label>
<select name="island" id="island1" required>
<option value=""  hidden>Select a marine park</option>
</select>

<label>State</label>
<select id="state2" onchange="GetIslands(this)" required></div>
<option value="" hidden>Select a state</option>
<? for(var i = 0; i < states.length; i++) { ?>      
<option value="<?= states[i] ?>" ><?= states[i] ?></option>
<? } ?></select>

<label>Island</label>
<select name="island2" id="island2" required>
<option value=""  hidden>Select a marine park</option>
</select>

<script>
function GetIslands(e) {
  const obj = {state1: island1, state2: island2};
  google.script.run.withSuccessHandler(function (ar) {
    console.log(ar);
    obj[e.id].length = 0;
    let option = document.createElement("option");
    option.value = "";
    option.text = "Select an island";
    option.hidden = true;
    obj[e.id].appendChild(option);
    ar.forEach(function (item, index) {
      let option = document.createElement("option");
      option.value = item;
      option.text = item;
      obj[e.id].appendChild(option);
    });
  }).getIslands(e.value);
}
</script>
  • 在此修改中,准备了一个用于转换已编辑标记的对象,如const obj = {state1: island1, state2: island2}.并且,使用它可以管理每个标记.

Javascript相关问答推荐

构造HTML表单以使用表单数据创建对象数组

JS—删除对象数组中对象的子对象

无法使用单击按钮时的useState将数据从一个页面传递到另一个页面

如何通过将实例方法的名称传递给具有正确类型的参数的继承方法来调用实例方法?

在使用位板时,如何在Java脚本中判断Connect 4板中中柱的对称性?

在SHINY R中的嵌套模块中,不能使用Java代码

在查看网页时,如何使HTML中的按钮工作方式类似于鼠标上的滚轮或箭头键?

Clip-Path在网页浏览器(Mozilla、Edge、Chrome)上不能正常工作,但在预览版Visual Code Studio HTML、CSS、JS上却能很好地工作

为什么在运行于<;img>;事件处理程序中的JavaScript中x和y是不可变的?

我为什么要使用回调而不是等待?

调用特定数组索引时,为什么类型脚本不判断未定义

如何使用Cypress在IFRAME中打字

检测带有委托的元素内部的点击,以及元素何时按其类名被选中

如何在父IF条件和单个IF条件中形成嵌套的三元语句

如何判断字符串是否只包含特定字符串

重新定位类元素

Reaction-跨多个组件共享一个功能

检索绰号及其串中的花数,JS

删除帖子的 comments 失败?

.使用OR运算符查找以侦听更改