如何使用javascript将表单输出链接到google fusion表查询_Javascript_Html_Forms_Google Fusion Tables

如何使用javascript将表单输出链接到google fusion表查询

javascript html forms

如何使用javascript将表单输出链接到google fusion表查询,javascript,html,forms,google-fusion-tables,Javascript,Html,Forms,Google Fusion Tables,我正在尝试创建一个html表单，它将根据用户输入的内容显示一个google fusion表下面是我目前拥有的代码，它显示了louth县的结果 <title>Sample form</title> <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script> <script type="text/javascript">

我正在尝试创建一个html表单，它将根据用户输入的内容显示一个google fusion表

下面是我目前拥有的代码，它显示了louth县的结果

<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>

示例表单
load（“当前”{packages:['table']}）；
google.charts.setOnLoadCallback（drawVisualization）；
函数drawVisualization（）{
google.visualization.drawChart({
“集装箱运输”：“可视化分区”，
“数据源URL”：“//www.google.com/fusionables/gvizdata？tq=”，
“查询”：“从中选择“机场标识”、“关闭名称”、“县”+
“Eyey5fgpxo3ytndml?jemannckywcumw4ouv，其中‘县’=‘卢思’，
“刷新间隔”：5，
“图表类型”：“表格”，
“选项”：{}
});
}

我想使用以下表单的输出来代替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">


安特里姆
阿尔马
卡洛
卡万
克莱尔
软木
德里
多尼格尔
向下
都柏林
费马纳
戈尔韦
克里
基尔代尔
基尔肯尼
莱伊什
莱特里姆
五行打油诗
朗福德
劳斯
梅奥
肉
莫纳汉
杂碎
罗斯康姆
斯莱戈
小费
泰龙
沃特福德
韦斯特米思
韦克斯福德
威克洛

将

元素与Javascript链接的一种方法是使用

onchange

事件。然后，每当在下拉菜单中选择新元素时，就会调用一个函数（

showCounty（）

）。此函数使用选定值更新图表

请注意，

onchange

事件将函数作为其参数，并使用

this

关键字向函数传递事件数据（包括选定值）

下面是对代码的一个修改，它显示了这种技术：

google.charts.load（“当前”{packages:['table']}）；
google.charts.setOnLoadCallback（loadDefault）；
功能（活动）{
google.visualization.drawChart({
“集装箱运输”：“可视化分区”，
“数据源URL”：“//www.google.com/fusionables/gvizdata？tq=”，
“查询”：“从中选择“机场标识”、“关闭名称”、“县”+
“1BeYE5fGPxo3yTNdmL?u jemannckywCumW4OUV，其中‘县’=”
+event.value+“'”，
“图表类型”：“表格”，
“选项”：{}
});
}
函数loadDefault（）{
showCounty（{值：“Louth”}）；
}


软木
都柏林
劳斯