如何使用javascript鏈接表單輸出到谷歌融合表查詢

我想創建一個html表單，它將根據用戶輸入的縣顯示一個谷歌融合表。如何使用javascript鏈接表單輸出到谷歌融合表查詢

這裏是我現在有的代碼顯示了縣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。到<select>元素使用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">

來源

2016-11-16 Aaron Gillespie

的一種方法是使用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>

來源

2016-11-16 20:05:53 rphv

輝煌！感謝您的明確解釋。 –

如何使用javascript鏈接表單輸出到谷歌融合表查詢

回答

相關問題