html实现下拉多选框
时间: 2023-07-07 18:08:51 浏览: 63
HTML中实现下拉多选框可以使用`<select>`元素的multiple属性。
示例代码如下:
```
<select multiple>
<option value="option1">Option 1</option>
<option value="option2">Option 2</option>
<option value="option3">Option 3</option>
<option value="option4">Option 4</option>
</select>
```
其中,`<option>`元素表示下拉框中的选项,value属性表示选项的值,文本内容则是显示在下拉框中的选项名称。
multiple属性表示允许多选,当该属性被设置后,用户可以同时选择多个选项。
相关问题
js实现下拉多选框组件
下面是一个简单的实现下拉多选框组件的示例代码:
```html
<!-- HTML结构 -->
<div class="dropdown">
<button class="btn btn-default dropdown-toggle" type="button" data-toggle="dropdown">
选择选项<span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu">
<li><a href="#" data-value="option1">选项1</a></li>
<li><a href="#" data-value="option2">选项2</a></li>
<li><a href="#" data-value="option3">选项3</a></li>
<li><a href="#" data-value="option4">选项4</a></li>
</ul>
<input type="hidden" name="selected-options">
</div>
```
```js
// JS代码
let dropdown = document.querySelector('.dropdown');
let dropdownToggle = dropdown.querySelector('.dropdown-toggle');
let dropdownMenu = dropdown.querySelector('.dropdown-menu');
let dropdownItems = dropdownMenu.querySelectorAll('li a');
let selectedOptions = dropdown.querySelector('input[name="selected-options"]');
dropdownToggle.addEventListener('click', function(e) {
e.stopPropagation();
dropdownMenu.classList.toggle('show');
});
for (let i = 0; i < dropdownItems.length; i++) {
let item = dropdownItems[i];
item.addEventListener('click', function(e) {
e.preventDefault();
e.stopPropagation();
let value = item.getAttribute('data-value');
item.classList.toggle('selected');
updateSelectedOptions();
});
}
function updateSelectedOptions() {
let values = [];
for (let i = 0; i < dropdownItems.length; i++) {
let item = dropdownItems[i];
if (item.classList.contains('selected')) {
values.push(item.getAttribute('data-value'));
}
}
selectedOptions.value = values.join(',');
}
```
这段代码实现了一个下拉多选框组件,用户可以选择多个选项,选项的值将以逗号分隔的形式保存在一个隐藏的表单元素中。当用户点击下拉框时,下拉框的显示状态将切换;当用户点击选项时,选项将被选中或取消选中,并更新隐藏的表单元素中的值。
java - easyexcel 实现excel导出下拉多选框 模板
使用EasyExcel实现excel导出下拉多选框模板的方法如下:
1. 首先,引入EasyExcel依赖。在pom.xml文件中加入以下依赖:
```xml
<dependency>
<groupId>com.alibaba</groupId>
<artifactId>easyexcel</artifactId>
<version>2.2.11</version>
</dependency>
```
2. 创建一个Java类作为数据的模型。例如:
```java
public class DataModel {
private String name;
private List<String> options;
// 省略getters和setters
}
```
3. 创建一个Controller类,用于处理请求和导出Excel文件。例如:
```java
@Controller
public class ExcelController {
@GetMapping("/export")
public void export(HttpServletResponse response) throws IOException {
// 创建excel写入器
EasyExcel.write(response.getOutputStream(), DataModel.class).sheet("Sheet1").doWrite(getData());
}
private List<DataModel> getData() {
// 返回要导出的数据列表
List<DataModel> data = new ArrayList<>();
DataModel model = new DataModel();
model.setName("张三");
model.setOptions(Arrays.asList("选项1", "选项2", "选项3"));
data.add(model);
// 添加更多的数据
return data;
}
}
```
4. 在前端页面中创建一个链接,点击该链接即可触发导出Excel文件的操作。例如:
```html
<a href="/export">导出Excel</a>
```
5. 运行程序,点击前端页面中的导出链接,即可下载一个包含下拉多选框的Excel文件。
以上就是使用EasyExcel实现excel导出下拉多选框模板的步骤和代码示例。
相关推荐
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)