这是我目前拥有的代码，唯一的缺点是不断添加搜索项，我不想一直更新选择选项。我唯一的问题是我似乎无法插入可与可视化表一起使用的输入。这是使用 select 的当前工作代码。
<html lang="en">
<head>
<title>Fishing Permit Search</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
<link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript" src="//www.google.com/jsapi"></script>
<script type="text/javascript">
google.load('visualization', '1', {packages: ['table']});
</script>
<script type="text/javascript">
var visualization;
function drawVisualization() {
// This saves the user's selected options from the selects in the body
var fish = $('#fish').find(":selected").text();
//How to query from a Google Sheets doc via URL
var query = new google.visualization.Query(
'//docs.google.com/spreadsheets/d/1SyOCcY4l2MLnHdyOZdPNlNQ0T8SQ9vrfae_Ygj_SKqo/edit?usp=sharing');
// The SELECT query where I search based on the user input variables, also created labels for the table headers
query.setQuery("SELECT A,B,C,D,E WHERE A = '"+fish+"' ORDER BY B LABEL B 'Fishing Permit Number', C 'Comercial', D 'Expires', E 'Valid'");
// Send the query with a callback function.
query.send(handleQueryResponse);
}
function handleQueryResponse(response) {
if (response.isError()) {
alert('Error in query: ' + response.getMessage() + ' ' + response.getDetailedMessage());
return;
}
var data = response.getDataTable();
visualization = new google.visualization.Table(document.getElementById('visualization'));
visualization.draw(data, {width: '800px'});
}
</script>
</head>
<body>
<div class="container">
<form action="">
<div class="form-group">
<label style="color: #6a1b9aff;">Fishing Permit Search</label>
<br>
<label for="name" style="color: #ffc107ff">Charecter Name</label>
<br>
<select name="name" class="form-control-Cname" id="fish">
<option value="" selected disabled hidden>Select Charecter</option>
<option value="Nick Miller">Nick Miller</option>
<option value="Joe Catfish">Joe Catfish</option>
<option value="Nikoli Ragmacov">Nikoli Ragmacov</option>
<option value="William Boxter">William Boxter</option>
<option value="Henry Onn">Henry Onn</option>
<option value="Tony Peterson">Tony Peterson</option>
<option value="jimmy crackcorn">jimmy crackcorn</option>
<option value="Clay Jackson">Clay Jackson</option>
<option value="Joe Bongo">Joe Bongo</option>
<option value="Gunner Jackson">Gunner Jackson</option>
<option value="Jamus Renn">Jamus Renn</option>
<option value="Amos Moses">Amos Moses</option>
<option value="Johnny Houston">Johnny Houston</option>
<option value="Frank Norton">Frank Norton</option>
<option value=""></option>
<option value="Carlyle Ferguson">Carlyle Ferguson</option>
<option value="Steven Fench">Steven Fench</option>
<option value="Andrew Jones">Andrew Jones</option>
<option value="Billy Daemon">Billy Daemon</option>
<option value="Ted Garner">Ted Garner</option>
<option value="Ryan Daniels">Ryan Daniels</option>
<option value="Tyler Geeks">Tyler Geeks</option>
<option value="Luke Adams">Luke Adams</option>
<option value="Jason Petterson">Jason Petterson</option>
<option value="Dan MacQueen">Dan MacQueen</option>
<option value="Jon Cat">Jon Cat</option>
<option value="Max Johnson">Max Johnson</option>
<option value="Mark Lawton">Mark Lawton</option>
<option value="Billy Bob">Billy Bob</option>
<option value="Taylor Taylorson">Taylor Taylorson</option>
<option value="Kapi Jackson">Kapi Jackson</option>
<option value="John McDonnovan">John McDonnovan</option>
<option value="Elijah Blakes">Elijah Blakes</option>
<option value="Charlie Rodgers">Charlie Rodgers</option>
<option value="Benjamin Harpooon">Benjamin Harpooon</option>
<option value="Oskar Einar">Oskar Einar</option>
<option value="Jimmy Crackcorn">Jimmy Crackcorn</option>
<option value="Billy Bob Jones">Billy Bob Jones</option>
<option value="Dale John">Dale John</option>
<option value="Andrew Williams">Andrew Williams</option>
<option value="Samuel Thompson">Samuel Thompson</option>
<option value="Forest Freeman">Forest Freeman</option>
<option value="Jonathan Longcliff">Jonathan Longcliff</option>
<option value="Corey Bern">Corey Bern</option>
<option value="Sam Larper / Jay Larper / Sam Jay / James Jay">Sam Larper / Jay Larper / Sam Jay / James Jay</option>
<option value="Bily Daemon">Bily Daemon</option>
<option value="Nick M. Civ-1308">Nick M. Civ-1308</option>
<option value="Bobby Doogin">Bobby Doogin</option>
<option value="Alexander Davidson">Alexander Davidson</option>
<option value="Frank Jackson ">Frank Jackson </option>
<option value="Frank Walker">Frank Walker</option>
<option value="Luciana Politan">Luciana Politan</option>
<option value="Braden Williams">Braden Williams</option>
<option value="Alexis Foster">Alexis Foster</option>
<option value="Hunter Howard">Hunter Howard</option>
<option value="Jackson Ryder">Jackson Ryder</option>
</select>
<br>
<label style="color: #6a1b9aff;">Search</label>
<br>
<input type="button" value="Search" id="but" onclick="drawVisualization()" />
<hr>
<div id="visualization"></div>
<p id="resulttext"></p>
<p id="resulttable"></p>
</div>
</form>
</div>
</body>
<html> ```