JSP 写一段代码:用nui里的下拉框,下拉框内容是按天查询和按月查询,并且是单选
时间: 2024-03-14 22:45:04 浏览: 122
自然用户界面设计 Brave NUI World
好的,假设您使用的是JSP技术,可以参考下面的代码实现:
```jsp
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>查询页面</title>
</head>
<body>
<form>
<label for="queryType">查询类型:</label>
<select id="queryType" name="queryType" onchange="handleQueryTypeChange()">
<option value="day" <% if ("day".equals(request.getParameter("queryType"))) { %>selected<% } %>>按天查询</option>
<option value="month" <% if ("month".equals(request.getParameter("queryType"))) { %>selected<% } %>>按月查询</option>
</select>
</form>
<script>
// 处理查询类型变化事件
function handleQueryTypeChange() {
const queryTypeSelect = document.getElementById("queryType");
const selectedQueryType = queryTypeSelect.value;
console.log("当前查询类型为:" + selectedQueryType);
// TODO: 根据查询类型进行相应的查询操作
}
</script>
</body>
</html>
```
解释一下代码:
- 首先在JSP页面中使用form标签包裹一个下拉框,label用于显示查询类型,select用于显示下拉框。在option标签中,用value属性绑定查询类型的值,用selected属性判断当前选项是否被选中,如果被选中则添加selected属性。
- 然后在script标签中定义一个handleQueryTypeChange函数,用于处理下拉框选项变化事件。在函数中,先获取到下拉框元素的值,然后将其输出到控制台中。最后,可以根据查询类型进行相应的查询操作。
- 注意,为了在页面初始加载时正确显示选中的查询类型,需要判断request.getParameter("queryType")的值,并用<% %>标签包裹相应的option标签,添加selected属性。
阅读全文