时间戳

首页 > 解决方案 > 通过选择列表将 Google 表格 A 列添加到外部网站

javascript - 通过选择列表将 Google 表格 A 列添加到外部网站

问题描述

我试图修改我为下拉 onclick 列表找到的代码，并将其变成带有选项的 HTML Select 列表。唯一的问题是我只得到一个条目。

我的最终目标是拥有 country1、country2、country3 以便用户选择一个国家，并且该选择通过外部网站添加到谷歌表中。

姓名（数据输入） 电子邮件（数据输入） 课程（从工作表 1 上的选择列表中选择）

提交（将所有条目添加到 google sheet2）

数据输入提交很简单，但允许用户从列表中进行选择，并且选择的选项被添加到工作表 2 中，这让我很难过。

<html>
<head>
<title>Post to Google Sheet Demo</title>

  <!-- bootstrap & fontawesome css -->

  <link href="http://cdn.jsdelivr.net/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet"/>

  <link rel="stylesheet" href="http://cdn.jsdelivr.net/fontawesome/4.1.0/css/font-awesome.min.css" />



  <!-- BootstrapValidator CSS -->

  <link rel="stylesheet" href="http://cdn.jsdelivr.net/jquery.bootstrapvalidator/0.5.0/css/bootstrapValidator.min.css"/>



  <!-- jQuery and Bootstrap JS -->

  <script type="text/javascript" src="http://cdn.jsdelivr.net/jquery/1.11.1/jquery.min.js"></script>

  <script type="text/javascript" src="http://cdn.jsdelivr.net/bootstrap/3.2.0/js/bootstrap.min.js"></script>



  <!-- BootstrapValidator JS -->

  <script type="text/javascript" src="http://cdn.jsdelivr.net/jquery.bootstrapvalidator/0.5.0/js/bootstrapValidator.min.js"></script>

  

  <!-- Animated Loading Icon -->

  <style type="text/css">

  .glyphicon-refresh-animate {

      -animation: spin .7s infinite linear;

      -webkit-animation: spin2 .7s infinite linear;

  }



  @-webkit-keyframes spin2 {

      from { -webkit-transform: rotate(0deg);}

      to { -webkit-transform: rotate(360deg);}

  }



  @keyframes spin {

      from { transform: scale(1) rotate(0deg);}

      to { transform: scale(1) rotate(360deg);}

  }

  </style>
  
  
  
<link rel="stylesheet" type="text/css" href="main.css">
    
    
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
  
</head>



<body>
    
<script type="text/javascript">
google.load('visualization', '1', {'packages':['corechart']});
google.setOnLoadCallback(ValIDS);

function ValIDS() {
  var queryValIDS = new google.visualization.Query('https://docs.google.com/spreadsheets/d/18HxssOQ5GJarg9tx0DIfuBqPdQTl5jj-h7_G_3vFIl4/edit?usp=sharing');
  queryValIDS.send(handleQueryValIDResponse);
}

function handleQueryValIDResponse(response) {
  if (response.isError()) {
    alert('Error in ID Validation Query: ' + response.getMessage() + ' ' + response.getDetailedMessage());
    return;
  }

  var datatable = response.getDataTable();
  


for (var i = 0; i < datatable.getNumberOfRows(); i++) {
    var ddItem = document.getElementById('myDropdown').appendChild(document.createElement('A'));
    ddItem.href = '#';
    var ddItemContent = ddItem.appendChild(document.createElement('SPAN'));
    ddItemContent.id = 'cat' + (i + 1);
    ddItemContent.innerHTML = datatable.getValue(i, 0);
  }

  

}

function myFunction() {
  document.getElementById('myDropdown').classList.toggle('show');
}






function schedule(selectedValue) {
  {
    var dropdowns = document.getElementsByClassName('dropdown-content');
    var i;
    for (i = 0; i < dropdowns.length; i++) {
      var openDropdown = dropdowns[i];
      if (openDropdown.classList.contains('show')) {
        openDropdown.classList.remove('show');
      }
    }
  }
}
</script>




<div class="dropdown">
    
   <select onchange="schedule(this.value)">
   <option id="myDropdown"></option>
   </select>

      
      
  </div>
</div>  

    
    
</body>

</html>

这是我的选择代码，它不起作用，你能帮忙吗？对不起，我不是天生的编码员。

标签： javascriptgoogle-sheets

解决方案

并将相应的代码更改为此。看到你可以在下拉列表中看到工作表数据。

// for loop
var html = '';
for (var i = 0; i < datatable.getNumberOfRows(); i++) {
  html += '<option>' + datatable.getValue(i, 0) + '</option>';
}
document.getElementById('myDropdown').innerHTML = html;

// dropdown
<select onchange="schedule(this.value)"  id="myDropdown">
</select>

推荐阅读