在Google电子表格数据中构建/填充网页上的下拉菜单

时间：2016-07-29 18:37:53

标签： javascript drop-down-menu google-apps-script google-visualization html-select

我正在使用Google可视化查询从此spreadsheet中提取列标题。目前，我必须在菜单中包含我想要的每个单元格的行索引和列索引。我想要的是一个脚本，它将使用电子表格第1行中单元格的数据动态填充此菜单。换句话说，将菜单设置为与电子表格中存在的一样大或小。

我相信我需要以下内容，但我不确定如何实现它。也许我需要服务器端脚本（GAS）来完成这个？ 

<select>
     for (var i = 0; i < data.length; ++i) { 
      <option>!= data[i] </option>
     } 
  </select>

我找到了大量使用Google的HTMLService来完成此操作的文档，但我需要使用其他服务来托管此菜单。

非常感谢任何帮助。谢谢！

我目前的代码如下...... 

google.load('visualization', '1', {'packages':['corechart']});
	google.setOnLoadCallback(ValIDS);
    
	function ValIDS() {
	var queryValIDS = new google.visualization.Query('https://docs.google.com/spreadsheet/ccc?key=1HpHMfoEnPgESb2XPVCgb7XyGwRAvrq3EoQj4WHj4vhA&sheet=QUERY2');

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

	var datatable = response.getDataTable();	
	var cat1 = datatable.getValue(0,0);
	var cat2 = datatable.getValue(0,1);
	var cat3 = datatable.getValue(0,2);
	var cat4 = datatable.getValue(0,3);
	var cat5 = datatable.getValue(0,4);
	var cat6 = datatable.getValue(0,5);
	var cat7 = datatable.getValue(0,6);
	var cat8 = datatable.getValue(0,7);
	var cat9 = datatable.getValue(0,8);
	var cat10 = datatable.getValue(0,9);
	
	
      
		document.getElementById('cat1').innerHTML = cat1;
		document.getElementById('cat2').innerHTML = cat2;
		document.getElementById('cat3').innerHTML = cat3;
		document.getElementById('cat4').innerHTML = cat4;
		document.getElementById('cat5').innerHTML = cat5;
		document.getElementById('cat6').innerHTML = cat6;
		document.getElementById('cat7').innerHTML = cat7;
		document.getElementById('cat8').innerHTML = cat8;
		document.getElementById('cat9').innerHTML = cat9;
		document.getElementById('cat10').innerHTML = cat10;
				
       
        }

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

window.onclick = function(event) {
  if (!event.target.matches('.dropbtn')) {

    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');
      }
    }
  }
}
.dropbtn {
    background-color: #4CAF50;
    color: white;
    padding: 16px;
    font-size: 16px;
    border: none;
    cursor: pointer;
}

.dropbtn:hover, .dropbtn:focus {
    background-color: #3e8e41;
}

.dropdown {
    position: relative;
    display: inline-block;
}

.dropdown-content {
    display: none;
    position: absolute;
    background-color: #f9f9f9;
    min-width: 160px;
    overflow: auto;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
}

.dropdown-content a {
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
}

.dropdown a:hover {background-color: #f1f1f1}

.show {display:block;}

.dropbtn {
    background-color: #4CAF50;
    color: white;
    padding: 16px;
    font-size: 16px;
    border: none;
    cursor: pointer;
}

.dropbtn:hover, .dropbtn:focus {
    background-color: #3e8e41;
}

.dropdown {
    position: relative;
    display: inline-block;
}

.dropdown-content {
    display: none;
    position: absolute;
    background-color: #f9f9f9;
    min-width: 160px;
    overflow: auto;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
}

.dropdown-content a {
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
}

.dropdown a:hover {background-color: #f1f1f1}

.show {display:block;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>


<div class="dropdown">
<button onclick="myFunction()" class="dropbtn">Dropdown</button>
  <div id="myDropdown" class="dropdown-content">
    <a href="#"><div id="cat1"></div></a>
    <a href="#"><div id="cat2"></div></a>
    <a href="#"><div id="cat3"></div></a>
	<a href="#"><div id="cat4"></div></a>
    <a href="#"><div id="cat5"></div></a>
    <a href="#"><div id="cat6"></div></a>
	<a href="#"><div id="cat7"></div></a>
    <a href="#"><div id="cat8"></div></a>
    <a href="#"><div id="cat9"></div></a>
	<a href="#"><div id="cat10"></div></a>
 
  </div>
</div>

1 个答案:

答案 0 :(得分：2)

您可以使用客户端JavaScript动态构建下拉列表 使用datatable

中的数据

有很多方法，但这应该可以满足您的需求

您可以使用getNumberOfColumns而不是对每个下拉项进行硬编码 这将允许将其他列添加到电子表格中，
无需更改代码/ html 

for (var i = 0; i < datatable.getNumberOfColumns(); 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(0, i);
}

(i + 1)用于上面id，
只是因此id与硬编码的内容相同

因为锚点（<a>）是内联元素，
使用<span>代替<div>

您甚至可能不需要id，或SPAN就此而言， 因为下拉项是动态创建的

请参阅以下工作代码段...

＆＃13;
＆＃13; 
google.load('visualization', '1', {'packages':['corechart']});
google.setOnLoadCallback(ValIDS);

function ValIDS() {
  var queryValIDS = new google.visualization.Query('https://docs.google.com/spreadsheet/ccc?key=1HpHMfoEnPgESb2XPVCgb7XyGwRAvrq3EoQj4WHj4vhA&sheet=QUERY2');
  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.getNumberOfColumns(); 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(0, i);
  }
}

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

window.onclick = function(event) {
  if (!event.target.matches('.dropbtn')) {
    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');
      }
    }
  }
}
＆＃13; 
.dropbtn {
    background-color: #4CAF50;
    color: white;
    padding: 16px;
    font-size: 16px;
    border: none;
    cursor: pointer;
}

.dropbtn:hover, .dropbtn:focus {
    background-color: #3e8e41;
}

.dropdown {
    position: relative;
    display: inline-block;
}

.dropdown-content {
    display: none;
    position: absolute;
    background-color: #f9f9f9;
    min-width: 160px;
    overflow: auto;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
}

.dropdown-content a {
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
}

.dropdown a:hover {background-color: #f1f1f1}

.show {display:block;}

.dropbtn {
    background-color: #4CAF50;
    color: white;
    padding: 16px;
    font-size: 16px;
    border: none;
    cursor: pointer;
}

.dropbtn:hover, .dropbtn:focus {
    background-color: #3e8e41;
}

.dropdown {
    position: relative;
    display: inline-block;
}

.dropdown-content {
    display: none;
    position: absolute;
    background-color: #f9f9f9;
    min-width: 160px;
    overflow: auto;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
}

.dropdown-content a {
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
}

.dropdown a:hover {background-color: #f1f1f1}

.show {display:block;}
＆＃13; 
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="dropdown">
  <button onclick="myFunction()" class="dropbtn">Dropdown</button>
  <div id="myDropdown" class="dropdown-content"></div>
</div>
＆＃13;
＆＃13;
＆＃13;

编辑

getValue方法有两个参数

getValue(rowIndex, columnIndex)

rowIndex和columnIndex都是从零开始的，
意味着第一个单元格值为getValue(0, 0)

如果您想从每行的第一列中提取值...

将i用作rowIndex，将0用作columnIndex 

for (var i = 0; i < datatable.getNumberOfRows(); i++) {
  var test = datatable.getValue(i, 0);
}
相关问题
最新问题