javascript-如何使多个相关下拉输入更有效？

我设法使用来自https://codewithcurt.com/create-dependent-drop-down-on-google-web-app/的代码制作了依赖下拉列表。我需要在这里的图片中输入相同的问题的多个条目：

它有效，我得到了预期的响应。但似乎触发功能只能使用一次。我的意思是，当我尝试将 GetIslands(this.value) 用于第二行条目时，它不起作用。这是我尝试反复使用 GetIslands(this.value) 时的情况： 在此处输入图像描述

当我为 B 选择一个州时，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;  
}