用JSP实现一个功能:界面写一个选择框,可以选择按天查询和按月查询,当选择按天查询时,界面上展示一个可以选择日期区间的选择框;当选择按月查询时,界面上展示一个可以选择截止日期的日期选择框
时间: 2024-03-12 15:47:08 浏览: 19
首先,你需要在JSP页面中添加一个下拉选择框,用于选择按天查询或按月查询:
```html
<label>查询方式:</label>
<select name="query_type" id="query_type">
<option value="day">按天查询</option>
<option value="month">按月查询</option>
</select>
```
然后,你可以使用JavaScript来实现根据选择框的值,动态显示不同的日期选择框。具体实现方式如下:
```html
<label>查询方式:</label>
<select name="query_type" id="query_type" onchange="showDateSelector()">
<option value="day">按天查询</option>
<option value="month">按月查询</option>
</select>
<div id="date_selector"></div>
<script>
function showDateSelector() {
var queryType = document.getElementById('query_type').value;
var dateSelector = document.getElementById('date_selector');
if (queryType === 'day') {
dateSelector.innerHTML = '<label>选择日期范围:</label>' +
'<input type="date" name="start_date">' +
'<span> - </span>' +
'<input type="date" name="end_date">';
} else if (queryType === 'month') {
dateSelector.innerHTML = '<label>选择截止日期:</label>' +
'<input type="date" name="end_date">';
} else {
dateSelector.innerHTML = '';
}
}
</script>
```
上面的代码中,我们使用了一个`div`元素来显示日期选择框,然后在`showDateSelector`函数中,根据选择框的值来动态设置`div`的内容。如果选择按天查询,则显示两个日期选择框,分别用于选择起始日期和结束日期;如果选择按月查询,则只显示一个日期选择框,用于选择截止日期。如果选择其它值,则隐藏日期选择框。