英文:
Issue with Conditional Multiple Drop Down in Google Sheets Sript
问题
新手学习Google脚本。我在这里搜索并谷歌搜索，直到我的手指酸痛，我仍然在努力克服可能是一个简单问题的问题，但我在Google Sheets中编程是新手，在Excel中编程经验有限。有许多讨论编码下拉菜单的帖子，但我试图让自己重新回到正轨，这样我就可以按照系列教程视频的下一步进行操作，我可以找到任何解决问题的东西。
我正在按照视频教程设置一些基本用户表单，以便我可以在一些项目中使用它们。其中包括从Bootstrap中复制的一系列代码。
视频链接：链接。
问题在于，当我运行UserForm时，与视频中的代码完全匹配后，下拉菜单不会调用表格中的任何项目。我已经反复查看了这个问题，但找不到与复制的代码不准确相关的任何错误。
我真的希望能够让代码按照教程中显示的方式正确运行，这样我就可以开始修改它以适应我的需求，知道如果出错，我可以回到功能代码。
如果有人能够看一看并帮助我，我真的非常非常感激。
后端代码（脚本文件）
function getDropDownArray(){
const ss = SpreadsheetApp.getActiveSpreadsheet();
const ws = ss.getSheetByName("Dropdown Options");
return ws.getRange(2, 1, ws.getLastRow() - 1, 1).getValues();
}
前端代码（HTML文件）
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap demo</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-9ndCyUaIbzAi2FUVXJi0CjmCapSmO7SnpJef0486qhLnuZ2cdeRhO02iuK6FUUVM" crossorigin="anonymous">
<title>Hello, world!</title>
</head>
<body>
<div class="container">
<div>
<div class="form-group">
<label for="item-name">item-name</label>
<select class="form-control" id="item-name">
</select>
</div>
<div class="form-group">
<label for="qty-received">qty-received</label>
<input type="text" class="form-control" id="qty-received">
</div>
<button class="btn btn-primary" id="mainButton" >Add</button>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-geWF76RCwLtnZ8qwWowPQNguL3RmwHVBC9FhGdlKrxdiJJigb/j/68SIy3Te4Bkz" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.8/dist/umd/popper.min.js" integrity="sha384-I7E8VVD/ismYTF4hNIPjVp/Zjvgyol6VFvRkX/vR+Vc4jQkC+hVqc2pM8ODewa9r" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.min.js" integrity="sha384-fbbOQedDUMZZ5KreZpsbe1LCZPVmfTnH7ois6mU1QK+m14rQ1l2bGBq41eYeM/fS" crossorigin="anonymous"></script>
<script>
function afterButtonClicked(){
var item = document.getElementById("item-name");
var qty = document.getElementById("qty-received");
var rowData = {item: item.value, qty: qty.value};
google.script.run.withSuccessHandler(afterSubmit).addNewRow(rowData);
}
function afterSubmit(e){
var qty = document.getElementById("qty-received");
qty.value="";
}
function afterSidebarLoads(){
google.script.run.withSuccessHandler(afterDropDownArrayReturned).getDropDownArray();
}
function afterDropDownArrayReturned(arrayOfArrays){
var item = document.getElementById("item-name");
arrayOfArrays.forEach(function(r){
var option = document.createElement("option");
option.textContent = r[0];
item.appendChild(option);
});
}
document.getElementById("mainButton").addEventListener("click", afterButtonClicked);
document.addEventListener("DOMContentLoaded", afterSidebarLoads);
</script>
</body>
</html>
我已经按照教程中显示的方式精确复制了这段代码。我已经反复检查过，以确保没有错别字等问题。但这仍然不起作用，但在视频中似乎完美运行。
谢谢 
英文:
Newbie to Google scripts here. I've searched on here and googled this until my fingers are sore and I'm struggling to overcome what is probably a simple issue, but I'm new to coding in Google Sheets and have limited experience in coding in Excel. There are many threads disussing coding drop downs, but I'm trying to get myself back on track so I can follow the series of tutorial videos through the next steps and I can find anything that resolves the issue.
I am following a video tutorial to set up some basic userforms to allow me to use them on some projects I'm working on. It includes a series of code copied in from Bootstrap.
Video here: LINK.
The issue is that when I run the UserForm after exactly matching to code in the video, the drop down isn't calling any of the items from the list in the sheet. I've gone through this so many times and cannot find any error related to inaccuracies in the copied code.
I really want to get to the point where the code runs properly, coded as is shown in the tutorial, so I can then start to modify it to suit my needs knowing that I can fall back to the functioning code if I make a mistake.
If anyone can take a look and help me out I would really, really, appreciate it.
Code Below:
backend code (script file)
function getDropDownArray(){
const ss = SpreadsheetApp.getActiveSpreadsheet();
const ws = ss.getSheetByName("Dropdown Options");
return ws.getRange(2, 1, ws.getLastRow() -1, 1).getValues();
}
Frontend Code (HTML file)
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap demo</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-9ndCyUaIbzAi2FUVXJi0CjmCapSmO7SnpJef0486qhLnuZ2cdeRhO02iuK6FUUVM" crossorigin="anonymous">
<title>Hello, world!</title>
</head>
<body>
<div class="container">
<div>
<div class="form-group">
<label for="item-name">item-name</label>
<select class="form-control" id="item-name">
</select>
</div>
<div class="form-group">
<label for="qty-received">qty-received</label>
<input type="text" class="form-control" id="qty-received">
</div>
<button class="btn btn-primary" id="mainButton" >Add</button>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-geWF76RCwLtnZ8qwWowPQNguL3RmwHVBC9FhGdlKrxdiJJigb/j/68SIy3Te4Bkz" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.8/dist/umd/popper.min.js" integrity="sha384-I7E8VVD/ismYTF4hNIPjVp/Zjvgyol6VFvRkX/vR+Vc4jQkC+hVqc2pM8ODewa9r" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.min.js" integrity="sha384-fbbOQedDUMZZ5KreZpsbe1LCZPVmfTnH7ois6mU1QK+m14rQ1l2bGBq41eYeM/fS" crossorigin="anonymous"></script>
<script>
function afterButtonClicked(){
var item = document.getElementById("item-name");
var qty = document.getElementById("qty-received");
var rowData = {item: item.value,qty: qty.value};
google.script.run.withSuccessHandler(afterSubmit).addNewRow(rowData);
}
function afterSubmit(e){
var qty = document.getElementById("qty-received");
qty.value="";
}
function afterSidebarLoads(){
google.script.run.withSuccessHandler(afterDropDownArrayReturned).getDropDownArray();
}
function afterDropDownArrayReturned(arrayOfArrays){
var item = document.getElementById("item-name");
arrayofArrays.forEach(function(r){
var option = document.createElement("option");
option.textContent = r[0];
item.appendChild(option);
});
}
document.getElementById("mainButton").addEventListener("click",afterButtonClicked);
document.addEventListener("DOMContentLoaded",afterSidebarLoads);
</script>
</body>
</html>
I've copied this code from the tutorial exactly as it is displayed in the video. I've been over and over it to make sure, correcting some issues with typos etc along the way. This still doesn't work but appears to work perfectly in the video.
Thank you
答案1
得分: 0
在你的脚本中，来自getDropDownArray()的值由afterDropDownArrayReturned(arrayOfArrays)的arrayOfArrays提供。但是，在以下部分，
arrayofArrays.forEach(function(r){
var option = document.createElement("option");
option.textContent = r[0];
item.appendChild(option);
});
使用了arrayofArrays。这与arrayOfArrays不同。我认为这是你当前问题的原因。因此，请按照以下方式修改函数afterDropDownArrayReturned并再次测试。
修改后的脚本：
function afterDropDownArrayReturned(arrayOfArrays) {
var item = document.getElementById("item-name");
arrayOfArrays.forEach(function (r) { // <--- 修改
var option = document.createElement("option");
option.textContent = r[0];
item.appendChild(option);
});
}
英文:
In your script, the values from getDropDownArray() are given by arrayOfArrays of afterDropDownArrayReturned(arrayOfArrays). But, at the following part,
arrayofArrays.forEach(function(r){
var option = document.createElement("option");
option.textContent = r[0];
item.appendChild(option);
});
arrayofArrays is used. This is not the same with arrayOfArrays. I think that this is the reason for your current issue. So, please modify the function afterDropDownArrayReturned as follows and test it again.
Modified script:
function afterDropDownArrayReturned(arrayOfArrays) {
var item = document.getElementById("item-name");
arrayOfArrays.forEach(function (r) { // <--- Modified
var option = document.createElement("option");
option.textContent = r[0];
item.appendChild(option);
});
}
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论