Select2 多选框


1. 引入select,官网可以下载

<link rel="stylesheet" href="$!static/static/js/select2-4.0.3/select2.min.css"/>
<script src="$!static/static/js/select2-4.0.3/select2.js"></script>
<script src="$!static/static/js/select2-4.0.3/zh-CN.js"></script>

2. 页面使用,select标签,本人用的velocity

<select class="select-multiple" multiple="multiple" name="cateId">
                            #foreach($bdoPO in $cateList)
                                <option value="$bdoPO.id">$bdoPO.cateName</option>
                            #end
                        </select>


3 . 页面加载select2

$(".select-multiple").select2();

或者根据name渲染:

$('select[name=route]').select2({
        placeholder: "选择航线",
        allowClear: true
    });


4.  根据name正常提交表单即可,选择多个的场合值逗号分隔


5. 回显,通过数组回显

var arr = '$!line.cateId'.split(",");
$('#gl select[name=cateId]').select2("val", [arr]);




### Select2 下拉多选框属性配置使用教程 #### 一、Select2 插件简介 Select2 是一款强大的 jQuery 插件,用于增强 HTML 的 `<select>` 元素。它支持单选和多选模式,并提供了丰富的自定义选项来满足各种需求。 #### 二、基本安装与初始化 为了使用 Select2 多选功能,需先加载必要的资源文件: ```html <!-- 引入 CSS --> <link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet"/> <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> <!-- 引入 JS --> <script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script> ``` 接着,在页面中的某个 `<select>` 元素上应用 Select2 初始化代码[^1]: ```javascript $(document).ready(function() { $('#mySelect').select2({ placeholder: "请选择", allowClear: true, multiple: true }); }); ``` #### 三、常用属性说明 ##### 1. `placeholder` 占位符设置 指定当未选择任何项目时显示的文字提示。 ##### 2. `allowClear` 是否允许清除已选项 如果设为 `true`,则会在有选择的情况下提供一个小图标让用户可以一键清空所有选择。 ##### 3. `multiple` 支持多选 开启此参数可使组件变为多选模式,默认情况下关闭。 ##### 4. `data-*` 自定义数据源 通过给 `<option>` 添加 `data-*` 属性来自定义附加信息,这些信息可以在事件处理函数中获取到。 ##### 5. `ajax` 动态加载远程数据 对于大数据量场景,可以通过 AJAX 请求动态加载选项列表,减少初始加载时间。 ```javascript $('#example-ajax').select2({ ajax: { url: '/api/data', dataType: 'json', delay: 250, // 延迟请求的时间(ms) data: function (params) { return { q: params.term }; // 查询关键字作为参数传递给服务器端接口 }, processResults: function (data) { return { results: $.map(data.items, function(item){ return { id:item.id,text:item.text }; }) }; } } }) ``` #### 四、样式调整与其他高级特性 除了上述基础配置外,Select2 还支持更多个性化定制,比如主题切换、标签创建等功能,可根据官方文档进一步探索。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值