Javascript tion.value=[项目[0]，项目[1]]； option.text=[项目[0]，项目[1]]； apptSelect.appendChild（选项）； }); }).getList（）； };**

**输入约会日期：

loadAppt（）** 输入名字：

输入姓氏：

输入客户电子邮件：

输入客户电话：

**

**

---

您的前端功能addCustomerApp调用后端功能newAppointment

Google Apps脚本函数newAppointment可以在添加新的结果后返回更新的可用插槽。尝试计算该结果并将其作为函数返回值传递

---

您可以在前端使用该结果。将其记录到测试中的控制台，然后使用它重新填充HTML select元素。

您能否提供有关哪些选项应更新、应更新哪些信息以及何时更新的更多详细信息？如果需要复制此文件，请提供服务器端代码。一般来说，请考虑提供一个。关于需要更新的内容，在谷歌表中有一个列，显示了特定时隙的可用约会数。当添加客户时，该数字将递减。当它达到0时，想法是从用户可用选项的html下拉列表中删除该时间段选项（日期和时间）。基本上是协助不超售该时段。感谢您的帮助，我将在以后的最小可复制示例上完成。因此，我实现了这一点，并在添加新列表之前添加了一行清除了下拉列表，它按预期运行。非常感谢你为我指明了正确的方向。当心。

function onOpen() {
  SpreadsheetApp.getUi() // Or DocumentApp or SlidesApp or FormApp.
      .createMenu('Customer')
      .addItem('Add', 'addCustomer')
      .addToUi();
}

//function that displays a user input form. Used to enter customer information
function addCustomer() {
  var active = SpreadsheetApp.getActiveSpreadsheet();
  var ss = active.getSheetByName('Customer Data');
  if (ss) {
    var html = HtmlService.createHtmlOutputFromFile('testground').setTitle('Add Customer');//change to user
    SpreadsheetApp.getUi() // Or DocumentApp or SlidesApp or FormApp.
    .showSidebar(html);
  }
  else {
    ss = active.insertSheet();
    ss.setName('Customer Data');
    var html = HtmlService.createHtmlOutputFromFile('testground').setTitle('Add Customer');
    SpreadsheetApp.getUi() // Or DocumentApp or SlidesApp or FormApp.
    .showSidebar(html);
    var header = ['Date Time', 'First Name', 'Last Name', 'Email', 'Phone', 'Student'];
    var range = ss.getRange("A1:F1");
    range.setValues([header]).setFontWeight('bold').setBackground('cyan').setBorder(true, true, true, true, true, true);
  }
  
}


//function to calculate available appointments by date and time. 
//adds user friendly formatting depending on availability of appointment.
function calcAvailable() {
  var ss = SpreadsheetApp.getActiveSpreadsheet().getActiveSheet();
  ss.getRange("E2").setFormula("=C2 - D2");

  //get the last row to dynamically input the formula above
  var lastRow = ss.getLastRow();
  //why do I have to subtract one from last row? I don't seem to understand getLastRow()
  var fillDownRange = ss.getRange(2, 5, lastRow - 1);
  ss.getRange("E2").copyTo(fillDownRange);

  //set rules for background colors
  var rule = SpreadsheetApp.newConditionalFormatRule()
    .whenNumberGreaterThan(0)
    .setBackground("#90ee90")
    .setRanges([fillDownRange])
    .build();
  var rule2 = SpreadsheetApp.newConditionalFormatRule()
    .whenNumberLessThanOrEqualTo(0)
    .setBackground("#ffcccb")
    .setRanges([fillDownRange])
    .build();
var rules = ss.getConditionalFormatRules();
rules.push(rule);
rules.push(rule2);
ss.setConditionalFormatRules(rules);
}

**function newAppointment(dateTime, first, last, email, phone) {
  var values = [dateTime, first, last, email, phone];
  var ss = SpreadsheetApp.getActiveSpreadsheet();
  var sheet = ss.getSheetByName('Customer Data');
  sheet.appendRow(values);

  //this section updates the available column after the apoinment is made
  var apptSheet = ss.getSheetByName('Appointment View');
  var lastRow = apptSheet.getLastRow();
  var dataArray = apptSheet.getRange(2, 1, lastRow - 1, 2).getDisplayValues();
  //must use split here as the date and time are passed as a single string;
  var dtgArray = dateTime.split(',');
  
  dataArray.forEach(function(item, index) {
      
      if(item[0] == dtgArray[0] && item[1] == dtgArray[1]) {
      var updateCol = apptSheet.getRange(index + 2, 4, 1, 1);
      var currentAppt = updateCol.getValue();
      updateCol.setValue(currentAppt += 1); 
      }
  });

}**

function getList() {
  var ss = SpreadsheetApp.getActiveSpreadsheet();
  var apptSheet = ss.getSheetByName('Appointment View');
  var lastRow = apptSheet.getLastRow();
  //apps script cannot return any date object. Must use getDisplayValues() below and post process.
  //var dataArray = apptSheet.getRange(2, 1, lastRow - 1, 2).getDisplayValues();
  var dataArray = apptSheet.getRange(2, 1, lastRow - 1, 5).getDisplayValues();
  var filterArr = dataArray.filter(apptBlock => apptBlock[4] > 0);
  var listArr = [];
  filterArr.forEach(function (block) {
    listArr.push([block[0], block[1]]);

  })
  
  return listArr;
}

<!DOCTYPE html>
<html>
  <head>
    <base target="_top">
    
    <script>
      **function addCustomerAppt() {
        //Add customer info from the form
        var dateTime = document.getElementById('dateTime').value;
        //var time = document.getElementById('time').value;
        var firstName = document.getElementById('firstName').value;
        var lastName = document.getElementById('lastName').value;
        var email = document.getElementById('email').value;
        var phone = document.getElementById('phone').value;
        //pass the above variables to the app script function
        google.script.run.newAppointment(dateTime, firstName, lastName, email, phone);
        
      }**


      //script to load appt into the dropdown menu. Limits choices to what is in appointment spreadsheet
      **function loadAppt() {
        google.script.run.withSuccessHandler(function(ar) 
        {
        var apptSelect = document.getElementById("dateTime");
        var option = document.createElement("option");
        option.value = "";
        option.text = "";
        apptSelect.appendChild(option); 

        ar.forEach(function(item, index){
          var option = document.createElement("option");
          option.value = [item[0], item[1]];
          option.text = [item[0], item[1]];
          apptSelect.appendChild(option);
        });
        }).getList();
      };**
    </script>
  </head>
  <body>
    <form>
      <p>
        **<label for="dateTime">Enter Appointment Date:&nbsp;&nbsp;</label>
        <select id="dateTime" name="dateTime"></select>
      </p>
      <script>loadAppt();</script>**
      <p>
        <label for="firstName">Enter First Name:&nbsp;&nbsp;</label>
        <input type="text" id="firstName" name="firstName">
      </p>
      <p>
        <label for="lastName">Enter Last Name:&nbsp;&nbsp;</label>
        <input type="text" id="lastName" name="lastName">
      </p>
      <p>
        <label for="email">Enter Customer Email:&nbsp;&nbsp;</label>
        <input type="email" id="email" name="email">
      </p>
      <p>
        <label for="phone">Enter Customer Phone:&nbsp;&nbsp;</label>
        <input type="text" id="phone" name="phone">
      </p>
      **<p>
        <label for="addCustomerAppt"></label>
        <input type="button" value="Add Customer" onclick="addCustomerAppt()">
      </p>**
      
  </body>