如何链接一个表单输出到一个谷歌融合表查询使用javascript
How to link a form output to a google fusion table query using javascript
我试图创建一个html表单,这将显示一个谷歌融合表取决于用户输入的县。
这是我目前拥有的代码,它显示了县的出生率。
<title>Sample form</title>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
google.charts.load("current", { packages: ['table'] });
google.charts.setOnLoadCallback(drawVisualization);
function drawVisualization() {
google.visualization.drawChart({
"containerId": "visualization_div",
"dataSourceUrl": "//www.google.com/fusiontables/gvizdata?tq=",
"query": "SELECT 'AIRO_ID', 'Off_Name', 'County'FROM " +
"1BeYE5fGPxo3yTNdmL_JE63JEMANnckYwcUmW4ouV WHERE 'County' = 'Louth'",
"refreshInterval": 5,
"chartType": "Table",
"options": {}
});
}
</script>
</head>
<body style="font-family: Arial;border: 0 none;">
<div id="visualization_div" style="width: 600px; height: 400px;"></div>
</body>
我想使用以下形式的输出来代替louth。但我似乎无法弄清楚如何将表单链接到javascript。
<html> <form>
<select name="County">
<option value="Antrim">Antrim</option>
<option value="Armagh">Armagh</option>
<option value="Carlow">Carlow</option>
<option value="Cavan">Cavan</option>
<option value="Clare">Clare</option>
<option value="Cork">Cork</option>
<option value="Derry">Derry</option>
<option value="Donegal">Donegal</option>
<option value="Down">Down</option>
<option value="Dublin">Dublin</option>
<option value="Fermanagh">Fermanagh</option>
<option value="Galway">Galway</option>
<option value="Kerry">Kerry</option>
<option value="Kildare">Kildare</option>
<option value="Kilkenny">Kilkenny</option>
<option value="Laois">Laois</option>
<option value="Leitrim">Leitrim</option>
<option value="Limerick">Limerick</option>
<option value="Longford">Longford</option>
<option value="Louth">Louth</option>
<option value="Mayo">Mayo</option>
<option value="Meath">Meath</option>
<option value="Monaghan">Monaghan</option>
<option value="Offaly">Offaly</option>
<option value="Roscommon">Roscommon</option>
<option value="Sligo">Sligo</option>
<option value="Tipperary">Tipperary</option>
<option value="Tyrone">Tyrone</option>
<option value="Waterford">Waterford</option>
<option value="Westmeath">Westmeath</option>
<option value="Wexford">Wexford</option>
<option value="Wicklow">Wicklow</option>
</select>
<input type="submit" value="Submit">
将<select>
元素与Javascript链接的一种方法是使用onchange
事件。然后,每当在下拉菜单中选择一个新元素时,就调用一个函数(在本例中为showCounty()
)。此函数使用所选值更新图表。
注意,onchange
事件接受一个函数作为它的参数,并且使用this
关键字将事件数据(包括所选值)传递给该函数。
下面是对代码的修改,显示了这种技术:
google.charts.load("current", { packages: ['table'] });
google.charts.setOnLoadCallback(loadDefault);
function showCounty(event) {
google.visualization.drawChart({
"containerId": "visualization_div",
"dataSourceUrl": "//www.google.com/fusiontables/gvizdata?tq=",
"query": "SELECT 'AIRO_ID', 'Off_Name', 'County'FROM " +
"1BeYE5fGPxo3yTNdmL_JE63JEMANnckYwcUmW4ouV WHERE 'County'='"
+ event.value + "'",
"chartType": "Table",
"options": {}
});
}
function loadDefault() {
showCounty({value: "Louth"});
}
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<div id="visualization_div" style="width: 600px; height: 180px;"></div>
<select name="County" onchange="showCounty(this)">
<option value="Cork">Cork</option>
<option value="Dublin">Dublin</option>
<option value="Louth" selected="selected">Louth</option>
</select>
相关文章:
- 创建一个类似链接的按钮,并通过Javascript函数打开一个新的弹出窗口
- jQuery:循环一个具有不同超时值的循环
- 当包含另一个asp文件时,是否也包含所有引用的样式和脚本页面
- 从javascript创建一个列表
- 节点导出返回一个空对象
- 使用clickToggle并在单击另一个元素时关闭元素
- 我可以在json对象中添加一个函数吗
- 使用javascript将动态表从一个html页面打印到另一个html页
- 将jsp文件下拉列表中的选定项分配给一个java变量(比如String selection)
- 表追加而不附加最后一个元素
- 我如何找到一个句子中的所有空格并替换忽略它们
- D3在一个调用中绘制不同的SVG形状,没有可见性
- 如何在android中使用phonegap将文件从一个文件夹移动/复制到另一个文件夹
- 使用类从一个标记中双击事件
- Javascript,访问一个主要对象模块模式中的每个对象
- 如何在一个融合表层中有许多标记
- 在一个融合层中可以有多少不同的标记有限制吗
- 如何链接一个表单输出到一个谷歌融合表查询使用javascript
- 如何映射一个特定的谷歌融合表地图
- 如何选择一个范围为我的下拉菜单与融合层