在Google网站中添加下拉框 [英] Add dropdown box in Google site
问题描述
我在Google表格中有一些数据.如何根据下拉框中的用户请求提取数据，然后在 Google网站中生成数据.我面临的挑战.
I have some data in Google sheet. How can i extract the data based on user request as per a dropdown box and generate it in Google Site. The challenges iam faced with.
Prob_1-使用Google网站中的下拉框
Prob_1- using a dropdown box in Google site
Prob_2-通过Google电子表格在Google网站中生成动态数据(或表格).
Prob_2- generate dynamic data ( or table ) in google site from the Google spreadsheet.
Analysis_1-我进行了详细的研究，并且了解到，只有使用第三方插件，我才能创建一个选择框.作为新手，需要一些基于此的准则.没有任何第三方插件是不可能的.
Analysis_1 - I have made a detailed study and understood that only using a third party plugin , i can make a select box. As a newbiew, needed some guidelines based on this. Is it not possible without any third party plugin.
Analysis_2-还是有其他选择可根据Google网站中的选择生成操作.我了解到在Google网站上无法执行脚本.因此，我该如何进行按钮点击操作.
Analysis_2- Or is there any other option to generate an action based on a selection in google site. I understood that scripting is not possible in google site. So how shall i make a button click action.
对此需要一些指导.
推荐答案
这是一些将选项加载到选择框中的javascript代码.
This is some javascript code to load options into a select box.
function updateSelect(vA)//array of values that go into the drop down or select box
{
var select = document.getElementById("sel1");
select.options.length = 0;
for(var i=0;i<vA.length;i++)
{
select.options[i] = new Option(vA[i],vA[i]);
}
}
这是用于选择框的html.
This is html for the select box.
<select id="sel1" style="width:125px;height:35px;margin:10px 0 10px 0;">
<option value="" selected></option>
</select>
对我来说似乎很简单.
这是一个更完整的解决方案.
Here's a more complete solution.
代码:
function getSelectOptions()
{
var ss=SpreadsheetApp.getActive();
var sh=ss.getSheetByName('Options');
var rg=sh.getDataRange();
var vA=rg.getValues();
var options=[];
for(var i=0;i<vA.length;i++)
{
options.push(vA[i][0]);
}
return vA;
}
function showSidebar()
{
var userInterface=HtmlService.createHtmlOutputFromFile('f');
SpreadsheetApp.getUi().showModelessDialog(userInterface, 'The Drop Down with No Options now has options.');
}
f.html
<!DOCTYPE html>
<html>
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script>
$(function() {
$('#txt1').val('');
google.script.run
.withSuccessHandler(updateSelect)
.getSelectOptions();
});
function updateSelect(vA)
{
var select = document.getElementById("sel1");
select.options.length = 0;
for(var i=0;i<vA.length;i++)
{
select.options[i] = new Option(vA[i],vA[i]);
}
}
console.log("My code");
</script>
</head>
<body>
<select id="sel1" style="width:125px;height:35px;margin:10px 0 10px 0;">
</select>
</body>
</html>
这是名为选项"的工作表
Here's what the sheet named Options
这篇关于在Google网站中添加下拉框的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
