html实现下拉框选择,实现不同类型的分类查找,请在以下代码修改
时间: 2024-03-16 07:43:37 浏览: 17
以下是基于给出的 HTML 代码实现下拉框选择分类查找的修改示例:
```html
<!DOCTYPE html>
<html>
<head>
<title>下拉框选择分类查找</title>
</head>
<body>
<!-- 下拉框 -->
<select id="styleSelect">
<option value="">请选择分类</option>
<option value="科幻">科幻</option>
<option value="文学">文学</option>
<option value="奇幻">奇幻</option>
<option value="悬疑">悬疑</option>
</select>
<!-- 按钮 -->
<button onclick="search()">查找</button>
<!-- 结果显示区域 -->
<div id="resultArea"></div>
<!-- JavaScript 代码 -->
<script>
function search() {
// 获取下拉框当前选中的值
var selectedStyle = document.getElementById("styleSelect").value;
// 判断是否选择了分类
if (selectedStyle === "") {
alert("请选择分类!");
return;
}
// 构造 SQL 查询语句
var sql = "SELECT * FROM book WHERE style='" + selectedStyle + "'";
// 这里可以根据实际情况,使用 Ajax 或其他技术实现查询并显示结果
// 以下示例使用 alert 弹窗显示查询语句
alert("查询语句:" + sql);
}
</script>
</body>
</html>
```
在这个示例中,我们在 HTML 中添加了一个下拉框和一个按钮,当用户选择了某个分类并点击“查找”按钮时,会弹出一个提示框,显示查询语句,这里只是为了演示查询语句的构造,实际使用时应该将查询结果显示在页面上。