HTML：select2多选下拉框

最新推荐文章于 2024-09-10 13:54:44 发布

奔波霸的伶俐虫

最新推荐文章于 2024-09-10 13:54:44 发布

阅读量4.6k

点赞数 2

文章标签： html linq webview 前端前端框架

本文链接：https://blog.csdn.net/weixin_60948956/article/details/124634307

版权

这篇博客介绍了如何在HTML页面中使用Thymeleaf模板引擎结合Select2库来创建一个多选下拉框。首先，在Head标签内引入了Select2的CSS样式，然后在需要的位置添加了包含Select2样式的form-group和select元素。接着，在script标签上引入Select2的JS文件，并在页面加载完成后初始化Select2，设置占位符和允许清空选项的功能。

摘要由CSDN通过智能技术生成

1、Head标签内引入所需要的链接css样式

<th:block th:include="include :: select2-css" />

2、在需要整多选下拉框的地方加入这个

<div class="form-group">

                <label class="col-sm-3 control-label">能源分类+分项：</label>

                <div class="col-sm-8">

                    <select name="collectEnergytypecode" class="form-control select2-multiple" th:with="type=${@dict.getEnergyName()}" required multiple>

                        <option th:each="dict : ${type}" th:text="${dict.name}" th:value="${dict.code}"></option>

                    </select>

                </div>

            </div>

3、在script标签上面添加js

<th:block th:include="include :: select2-js" />

4、script标签里面加入方法

$(function() {

            $('#collectEnergyclasscode').select2({

                placeholder: "请选择",

                allowClear: true

            });

        })