选择名称时自动填写电子邮件地址字段

Question

大家好，我正在使用此代码作为数据列表标记下拉字段，从列表中选择姓名和电子邮件，或者允许插入新的姓名或电子邮件(谢谢Tanaike(，效果很好。我想知道是否有人可以帮助我编写代码，如果所选名称存在，则自动填充电子邮件字段。名单来自我的谷歌表单DD栏"B"，电子邮件位于栏"C"这是我正在使用的代码。它的工作方式img现在我可以选择电子邮件，但我希望它能自动填充。感谢

<!--------------- Name Select ------------------->
<script>
function namedd() {
var value = document.getElementById("input").value;
console.log(value)
}
</script>
<div class="form-row">
<div class="form-group col-md-5">
<label for="name">name</label>
<input type="text" id="input" class="form-control" list="name" name="name" placeholder="Select name" >
<datalist id="name"  >
<?
var sheet   = SpreadsheetApp.getActive().getSheetByName("DD");
var lastRow = sheet.getLastRow();
var myRange = sheet.getRange("B2:B"+lastRow);
var data    = myRange.getValues();
for (var i = 0; i < data.length; ++i) { ?>
<option value="<?!= data[i] ?>">
<? } ?>
</datalist>

</div>

<!--------------- Email Select ------------------->
<script>
function emaildd() {
var value = document.getElementById("input").value;
console.log(value)
}
</script>
<div class="form-row">
<div class="form-group col-md-5">
<label for="email">email</label>
<input type="email" id="input" class="form-control" list="email" name="email" placeholder="Select email" >
<datalist id="email"  >
<?
var sheet   = SpreadsheetApp.getActive().getSheetByName("DD");
var lastRow = sheet.getLastRow();
var myRange = sheet.getRange("C2:C"+lastRow);
var data    = myRange.getValues();
for (var i = 0; i < data.length; ++i) { ?>
<option value="<?!= data[i] ?>">
<? } ?>
</datalist>

</div>

Answer 1

我相信你的目标如下。

• 当在下拉列表中选择名称时，您希望通过使用所选名称搜索电子邮件的值来将电子邮件的值设置为电子邮件的下拉列表
• 在您的情况下，名称和电子邮件值被放在"列中；B"；以及"；C"；在"；DD"；片材

为了实现您的目标，我建议使用addEventListener()和google.script.run。当使用当前脚本时，下面的修改如何？

修改的脚本：

请将以下脚本复制并粘贴到脚本编辑器中。在这种情况下，会添加一个谷歌应用程序脚本的功能。

HTML&Javascript端：

在您的HTML中，有两个input的ID。因此，在本次修改中，它们被更改为input1和input2。请小心。

<div class="form-row">
<div class="form-group col-md-5">
<label for="name">name</label>
<input type="text" id="input1" class="form-control" list="name" name="name" placeholder="Select name">
<datalist id="name">
<?
var sheet   = SpreadsheetApp.getActive().getSheetByName("DD");
var lastRow = sheet.getLastRow();
var myRange = sheet.getRange("B2:B"+lastRow);
var data    = myRange.getValues();
for (var i = 0; i < data.length; ++i) { ?>
<option value="<?!= data[i] ?>">
<? } ?>
</datalist>
</div>
</div>
<div class="form-row">
<div class="form-group col-md-5">
<label for="email">email</label>
<input type="email" id="input2" class="form-control" list="email" name="email" placeholder="Select email">
<datalist id="email">
<?
var sheet   = SpreadsheetApp.getActive().getSheetByName("DD");
var lastRow = sheet.getLastRow();
var myRange = sheet.getRange("C2:C"+lastRow);
var data    = myRange.getValues();
for (var i = 0; i < data.length; ++i) { ?>
<option value="<?!= data[i] ?>">
<? } ?>
</datalist>
</div>
</div>
<script>
document.getElementById("input1").addEventListener("change", () => {
google.script.run.withSuccessHandler(v => {
document.getElementById("input2").value = v;
}).getEmailFromName(document.getElementById("input1").value);
});
function namedd() {
var value = document.getElementById("input1").value;
console.log(value)
}
function emaildd() {
var value = document.getElementById("input2").value;
console.log(value)
}
</script>

谷歌应用程序脚本端：

请将此脚本复制并粘贴为谷歌应用程序脚本。

function getEmailFromName(v) {
var sheet = SpreadsheetApp.getActive().getSheetByName("DD");
var values = sheet.getRange("B2:C"+sheet.getLastRow()).getValues();
var res = values.filter(([b]) => b == v);
return res.length > 0 ? res[0][1] : "";
}

• 当打开上述HTML并选择下拉列表的名称时，通过运行google.script.run来更改电子邮件的下拉列表

注意：

• 如果您使用Web应用程序打开以上HTML，请在修改Web应用程序脚本时将Web应用程序重新部署为新版本。这样，最新的脚本就会反映到Web应用程序中。请小心
• 在这个修改后的脚本中，它假设每个电子邮件都是电子邮件中唯一的值。请小心

参考文献：

• addEventListener((
• 类google.script.run