我用https://codewithcurt.com/create-dependent-drop-down-on-google-web-app/的代码制作了相关下拉列表.我需要对相同的问题输入多个条目,如图中所示:
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:
当我为人员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;
}