请求：基于用户从下拉列表中选择的 HTML 自动填充值 HTML 和 Javascript 方面：Google Apps 脚本方面：注意：来自：致：

如何解决请求：基于用户从下拉列表中选择的 HTML 自动填充值 HTML 和 Javascript 方面：Google Apps 脚本方面：注意：来自：致：

Google 表格包含以下字段：客户姓名、手机、电子邮件、生日和周年纪念

例如 Google Sheet 有如下数据： 名称：普拉萨德， 手机9999999， 电子邮件 [e-mail] 生日：11/1/1990 生日：11/1/2020

在 HTML 中：客户名称是下拉列表，值将来自谷歌表

如果从下拉列表中选择客户名称，我需要所有字段都将根据从谷歌表中的选择填写

例如：如果我选择名称 prasad rest 将按照上面例子中的谷歌表填写

HTML Code :

<h3>Customer Details</h3>

   
 
      <label>Customer Name: : <br>
      <input list="Customer_Name"  name="Customer_Name" ></label>
      <datalist id="Customer_Name" >
      <option value="" style="display:none;"></option> 
        <?!= getvendors(); ?>
      </datalist></td> 

    
    Customer Mobie Number:<br>
    <input type="number" name="Customer_Mobie_Number">
    <br>
    
    Customer Email:<br>
    <input type="email" name="Customer_Email">
    <br>
    
   Birthday Date:<br>
    <input type="date" name="Birthday">
    <br>


JS:

    function getvendors() {
      var active = SpreadsheetApp.getActive();
      var sheet = active.getSheetByName("Cus_Details");
      var lastRow = sheet.getLastRow();
      var myRange = sheet.getRange("A2:A" + lastRow); 
      var data    = myRange.getValues();
      var optionsHTML = "";
      for (var i = 0; i < data.length; i+=1) {
        optionsHTML += '<option>' + data[i][0] + '</option>';
      };
      return optionsHTML;
    }

解决方法

我相信你的目标如下。

• 当“Customer_Name”的下拉列表发生更改时，您希望从行中检索值并将其放入 Mobile,Email,Birthday,anniversary 的每个输入标记中。
• 您的电子表格的标题为 Customer Name,Mobile,anniversary。

这样的话，下面的修改怎么样？

HTML 和 Javascript 方面：

<h3>Customer Details</h3>
<label>Customer Name: : <br>
  <input list="Customer_Name" id="list" name="Customer_Name"></label>
<datalist id="Customer_Name">
  <option value="" style="display:none;"></option>
  <?!= getVendors(); ?>
</datalist></td>
Customer Mobie Number:<br>
<input type="number" id="Customer_Mobie_Number" name="Customer_Mobie_Number">
<br>
Customer Email:<br>
<input type="email" id="Customer_Email" name="Customer_Email">
<br>
Birthday Date:<br>
<input type="date" id="Birthday" name="Birthday">
<br>
Anniversary Date:<br>
<input type="date" id="Anniversary" name="Anniversary">
<br>
<script>
  document.getElementById("list").addEventListener("change",setValues);

  function setValues(e) {
    google.script.run.withSuccessHandler(([b,c,d,e]) => {
      document.getElementById("Customer_Mobie_Number").value = b;
      document.getElementById("Customer_Email").value = c;
      document.getElementById("Birthday").value = d;
      document.getElementById("Anniversary").value = e;
    }).getValues(e.target.value);
  }
</script>

Google Apps 脚本方面：

function getValues(e) {
  var active = SpreadsheetApp.getActive();
  var sheet = active.getSheetByName("Cus_Details");
  var lastRow = sheet.getLastRow();
  var range = sheet.getRange("A2:A" + lastRow).createTextFinder(e).matchEntireCell(true).findNext();
  return range.offset(0,1,4).getValues()[0].map(e => e instanceof Date ? e.toISOString().split("T")[0] : e);
}

注意：

• 当我看到您的 HTML 和示例图片时，似乎是“周年纪念日”和“周年纪念日”下方的标签。所以在这个答案中，我为“周年纪念日”添加了一个输入标签。此修改是一个示例修改脚本。所以，请根据您的实际情况进行修改。

添加：

关于以下您的回复，

感谢您的时间，它按我的要求工作，但是当 DOB 或 Aniversary 从谷歌工作表复制到字段时，它会减少一天（例如：14/08/1990 在工作表中，输入它将于 13/08/ 1990)

在这种情况下，如何修改上面的 getValues(e) 脚本如下。

来自：

return range.offset(0,4).getValues()[0].map(e => e instanceof Date ? e.toISOString().split("T")[0] : e);

致：

return range.offset(0,4).getValues()[0].map(e => e instanceof Date ? Utilities.formatDate(e,Session.getScriptTimeZone(),"yyyy-MM-dd") : e);

或

return range.offset(0,active.getSpreadsheetTimeZone(),"yyyy-MM-dd") : e);