JSP写一段代码:用NUI里的下拉框,下拉框内容是按天查询和按月查询,并且是单选
时间: 2024-03-14 16:45:06 浏览: 134
好的,假设您使用的是JSP技术NUI框架,可以参考下面的代码实现:
```jsp
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>查询页面</title>
<link rel="stylesheet" href="/nui/nui.css"> <!-- 引入NUI框架样式文件 -->
</head>
<body>
<form>
<label for="queryType">查询类型:</label>
<div class="nui-form-item"> <!-- 使用NUI的form-item样式 -->
<div class="nui-select"> <!-- 使用NUI的select样式 -->
<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>
</div>
</div>
</form>
<script src="/nui/nui.js"></script> <!-- 引入NUI框架脚本文件 -->
<script>
NUI.use(["jquery"], function($) { // 使用NUI的use方法加载jQuery库
// 处理查询类型变化事件
function handleQueryTypeChange() {
const queryTypeSelect = document.getElementById("queryType");
const selectedQueryType = queryTypeSelect.value;
console.log("当前查询类型为:" + selectedQueryType);
// TODO: 根据查询类型进行相应的查询操作
}
});
</script>
</body>
</html>
```
解释一下代码:
- 首先在JSP页面中引入NUI框架的样式文件和脚本文件。
- 然后在JSP页面中使用NUI的样式和组件,使用nui-form-item和nui-select样式来美化下拉框的样式。在option标签中,用value属性绑定查询类型的值,用selected属性判断当前选项是否被选中,如果被选中则添加selected属性。
- 最后,在script标签中使用NUI的use方法加载jQuery库,并定义一个handleQueryTypeChange函数,用于处理下拉框选项变化事件。在函数中,先获取到下拉框元素的值,然后将其输出到控制台中。最后,可以根据查询类型进行相应的查询操作。
阅读全文