如何使用 javascript 将表单输出链接到 google 融合表查询答案

【问题标题】：How to link a form output to a google fusion table query using javascript如何使用 javascript 将表单输出链接到 google 融合表查询
【发布时间】：2016-11-16 17:15:50
【问题描述】：

我正在尝试创建一个 html 表单，该表单将根据用户输入的县显示谷歌融合表。

这是我目前拥有的代码，它显示了 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>

我想使用以下表格的输出来代替 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 html forms google-fusion-tables

【解决方案1】：

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

【讨论】：