Question

<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="ISO-8859-1">
<script src="//code.jquery.com/jquery-1.11.3.min.js"></script>
<script>

	$(document).ready(function() {
		$("select").change(function() {
			$("select").after("<br>here");
			
			//window.alert("We're getting somewhere!")
			//document.write("#1");			
		});
	});
</script>
<title>Query Tool</title>
</head>
<h1>Organizer Tool</h1>
<HR>
<p>Please choose search criteria:</p>
<select id=1>
	<option value="MMSI">MIMSI</option>
	<option value="Ship Type">shipType</option>
	<option value="Anomaly Type">Anomaly Type</option>
</select>
<button type="button">Search</button>
<body><br><br><br>
	<p>Testing.</p>

</body>
</html>

我正在开发一个应用程序，它通过webserver与用户交互（使用 JQuery ）并接收一个以下拉选项形式从浏览器端接收的字符串。选择该选项后，用户将单击搜索，http请求将与该字符串一起发送，并在服务器端接收，此时它将与数据库交互并查询该字符串。找到该搜索后，它会以表格格式将其打印回客户端屏幕。现在，我的问题是选择多个选项来查询;每次用户选择上一个菜单时，如何显示新的下拉菜单？我对事件处理程序有一个新手的理解，并意识到我可以触发“更改”事件并显示文本;然而，任何人都可以解释如何在检测到“更改”后在第一个下方显示该选项下拉菜单吗？到目前为止，我每次在下拉列表中发生更改时都能显示字符串'here'。

非常感谢，人

Answer 1

如果我理解你的话，你一直在寻找这样的事情：

<!DOCTYPE html>
<html lang="en-US">
<head>
<title>Query Tool</title>
<meta charset="ISO-8859-1">
<script src="//code.jquery.com/jquery-1.11.3.min.js"></script>
<script>

    $(document).ready(function() {
        $("#first_select").change(function() {
            //$.post('where',{data},function (d) {     //this is to post data to the server and get the answer with function
                // documentation is at http://api.jquery.com/jQuery.post/
                // if the answer is in JSON, decode it
                var answer = '[{"ID":"1","name":"Astronomy"},{"ID":"2","name":"Microscopy"},{"ID":"3","name":"Bilogy"}]';
                var d = JSON.parse(answer);

                var s = $("<select id=\"select_two\" name=\"select_two\" />");
                for(var val in d) {
                    $("<option />", {value: d[val].ID, text: d[val].name}).appendTo(s);
                }
                $("#selector_area").empty();
                s.appendTo("#selector_area");



            //}); // closing brackets for the post method
        });
    });
</script>

</head>

<body><br><br><br>
    <p>Testing.</p>
    <h1>Organizer Tool</h1>
<HR>
<p>Please choose search criteria:</p>
<select id="first_select">
    <option value="MMSI">MIMSI</option>
    <option value="Ship Type">shipType</option>
    <option value="Anomaly Type">Anomaly Type</option>
</select>

<div id="selector_area"></div>
<button type="button">Search</button>
</body>
</html>

在原始下拉选项下面的HTML中重新显示相同的下拉菜单？

1 个答案: