时间戳

首页 > 解决方案 > 下拉列表未显示，Bootstrap 和 Google 应用程序脚本，下拉列表从电子表格中填充

google-apps-script - 下拉列表未显示，Bootstrap 和 Google 应用程序脚本，下拉列表从电子表格中填充

问题描述

我一直在努力使这项工作好几个小时，似乎一切都井井有条，但我无法让它发挥作用

希望，也许有人可以指出我正确的方向，你看到这段代码有什么问题吗？

相关部分是第一个文件的最后一个函数

对于第二个文件，都在表单组件之后

我很绝望 ：（

这是我正在使用的代码

代码.gs

  function doGet(){
  return HtmlService.createHtmlOutputFromFile("Webappboot");                                                                 //Name of the HTML file
  }

  function AddRecord(input1, input2, input3, input4, input5, input6, input7) {                                               //Names of the componentsIDs
    
    var ss= SpreadsheetApp.openById("1JJrWaeiDUC7TKFo3zjG3MHWJ90OnU6N3AiEh-9cXdaE");                                         //Paste Google Sheet ID
    var webAppSheet = ss.getSheetByName("TrainingLogData");                                                                  //Paste Data Sheet Name
    var lastRow = webAppSheet.getLastRow();


    webAppSheet.insertRows(2, 1);//shift all rows down by one from row 2
    
    webAppSheet.getRange(2,1).setValue(lastRow);                                                  //Entry ID
    webAppSheet.getRange(2,2).setValue(input1);                                                   // Date
    webAppSheet.getRange(2,3).setFormula('="Wk - " & WEEKNUM(B2) & " - " & YEAR(B2)');            // Week # and Year Formula: ="Wk - " & WEEKNUM(B2) & " - " & YEAR(B2)
    webAppSheet.getRange(2,4).setValue(input2);                                                   //Exercise
    webAppSheet.getRange(2,5).setValue(input3);                                                   //Mov.Pattern/Muscle Group
    webAppSheet.getRange(2,6).setValue(input4);                                                   //Sets
    webAppSheet.getRange(2,7).setValue(input5);                                                   //Reps
    webAppSheet.getRange(2,8).setValue(input6);                                                   //RIR
    webAppSheet.getRange(2,9).setValue(input7);                                                   //Kg                             
    webAppSheet.getRange(2,10).setValue(new Date());                                              //Timestamp


  } 

  function getDropDownArray (){
    var ss2 = SpreadsheetApp.openById("1JJrWaeiDUC7TKFo3zjG3MHWJ90OnU6N3AiEh-9cXdaE");                                         //Google Sheet ID
    var dropdownSheet = ss2.getSheetByName("SupportSheet");                                                                    //Sheet with dropdown options
    var lastRowdd = dropdownSheet.getLastRow();

    return dropdownSheet.getRange(1,2,lastRowdd, 1).getValues();

  }

HTML

  <!doctype html>
  <html lang="en">
    <head>
      <!-- Required meta tags -->
      <meta charset="utf-8">
      <meta name="viewport" content="width=device-width, initial-scale=1">

      <!-- Bootstrap CSS -->
      <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous">

      <script>
      function AddRow()
      {
        var input1 = document.getElementById("input1").value;
        var input2 = document.getElementById("input2").value;
        var input3 = document.getElementById("input3").value;
        var input4 = document.getElementById("input4").value;
        var input5 = document.getElementById("input5").value;
        var input6 = document.getElementById("input6").value;
        var input7 = document.getElementById("input7").value;
        if(input1 != '' && input2 != '' && input3 != '' && input4 != '' && input5 != '' && input6 != '' && input7 != '')
        {
        google.script.run.AddRecord(input1, input2, input3, input4, input5, input6, input7);
        document.getElementById("input1").value = '';
        document.getElementById("input2").value = '';
        document.getElementById("input3").value = '';
        document.getElementById("input4").value = '';
        document.getElementById("input5").value = '';
        document.getElementById("input6").value = '';
        document.getElementById("input7").value = '';
        document.getElementById("display_error").innerHTML = "";
        }
        else
        {
        document.getElementById("display_error").innerHTML = "Enter All Information";
        }
      }
      </script>
          
    </head>
    <body>
    <!-- Login Form -->
    <div class="container-fluid">
      <div class="row justify-content-center mt-5">
        <div class="col-lg-4 col-md-6 col-sm-6">
          <div class="card shadow">
            <div class="card-title text-center border-bottom">
              <h2 class="p-3">Data Entry</h2>
            </div>
            <div class="card-body">
              <form>
                
                <div class="mb-4">
                  <label for="input1" class="form-label">Input1</label>
                  <input type="date" class="form-control" id="input1" />
                </div>
                              
                <div class="mb-4">
                  <label for="input2" class="form-label">input2</label>
                  <input type="text" class="form-control" id="input2" />
                </div>
                
                <div class="mb-4">
                  <label for="input3" class="form-label">input3</label>
                  <select class="form-control" id="input3" >
                  </select>

                  
                </div>
                
                <div class=row>
                
                <div class="col mb-4">
                  <label for="input4" class="form-label">input4</label>
                  <input type="number" class="form-control" id="input4" />
                </div>
                
                <div class="col mb-4">
                  <label for="input5" class="form-label">input5</label>
                  <input type="number" class="form-control" id="input5" />
                </div>
                  
                </div>
                
                <div class=row>
                
                <div class="col mb-4">
                  <label for="input6" class="form-label">input6</label>
                  <input type="text" class="form-control" id="input6" />
                </div>
        
                <div class="col mb-4">
                  <label for="input7" class="form-label">input7</label>
                  <input type="text" class="form-control" id="input7" />
                </div>
                  
                </div>
                
                <div class="mb-4">
                  <input type="button" value="Submit" class="btn btn-primary mr-1" onclick="AddRow()" />
                  <div id="display_error" style="color: red" ></div>
                </div>
                              
              </form>
            </div>
          </div>
        </div>
      </div>
    </div>


  <script>
    
  function afterPageLoads() {
    google.script.run.withSuccessHandler(afterDropDownArrayReturned).getDropDownArray();
    
  }

  function afterDropDownArrayReturned(arrayOfArrays){
    var dditem = document.getElementById("input3");

    arrayOfArrays.forEach(function(r){
      var option = document.createElement("option");
      option.textContent = r[0];
      dditem.appendChild(option);
    });
  }

  document.addEventListener("DOMcontentLoaded",afterPageLoads);

  </script>


  <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.2/dist/umd/popper.min.js" integrity="sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p" crossorigin="anonymous"></script>
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/js/bootstrap.min.js" integrity="sha384-Atwg2Pkwv9vp0ygtn1JAojH0nYbwNJLPhwyoVbhoPwBhjQPR5VtM2+xf0Uwh9KtT" crossorigin="anonymous"></script>
    </body>
  </html>

标签： google-apps-scriptdropdownspreadsheetbootstrap-5

解决方案

我以为在你的脚本中，DOMcontentLoaded是需要修改的。

从：

document.addEventListener("DOMcontentLoaded",afterPageLoads);

到：

document.addEventListener("DOMContentLoaded", afterPageLoads);
  • 在本次修改中，DOMcontentLoaded修改为DOMContentLoaded。

笔记：

  • 在此修改中，假设 Google Apps Script 端的脚本和其他 Javascript 工作正常。请注意这一点。

参考：

推荐阅读