从 Google 电子表格数据在网页上构建/填充下拉菜单
Building / Populating a Drop Down Menu on Web Page from Google Spreadsheet Data
我正在使用 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>
您可以使用客户端 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
,
因为下拉项是动态创建的
请参阅以下工作片段...
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');
}
}
}
}
.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 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>
编辑
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);
}
我正在使用 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>
您可以使用客户端 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
,
因为下拉项是动态创建的
请参阅以下工作片段...
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');
}
}
}
}
.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 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>
编辑
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);
}