select2多选设置select多选,select2取值和赋值
2024-08-22 07:54:32
select2设置select多选,select2取值和赋值,作为筛选条件的时候,取值相对简单,把选中的id值转为字符串传给后端查询,查询之后会刷新页面,为了在下拉框中显示刚刚选中的值,就需要给select赋值,可以将刚才传给后端的字符串再传回前端,然后转为一位数组,再赋值给select2就会显示刚刚选中的值,赋值方法:$('#id').val(arr).trigger('change'),id为select的id属性,这里的arr是刚才从后端传回前端的id转成的一位数组。
select2设置select多选,select2取值和赋值,首先需要引入select2的js文件,select2官网地址:https://select2.org/
//select2html代码设置选项,list为后端查询出来的选项,循环赋值
- <select name="id" id="id" multiple="multiple">
- <option value="0">请选择部门</option>
- <volist name="list" id="vo">
- <option value="{$vo.id}" <eq name="vo.id" value="$id">selected = "selected" </eq>>{$vo.name}</option>
- </volist>
- </select>
//可以另外设置一个隐藏的input框来存select选中的id,方便传给后端
<input type="hidden" id="select_id" name="select_id"/>
//select2插件初始化
- $("#id").select2({
- language : "zh-CN",
- minimumInputLength : 0,
- placeholder:"可多选",//默认值
- allowClear: true,
- })
//select2插件赋值
- var select_id = $("#select_id").val();
- arr = select_id.split(",");//注意:arr为select的id值组成的数组
- $('#id').val(arr).trigger('change');
//select2多选,取值,在下拉框中选中以后,获取到选择的id值
- $('#id').change(function(){
- var o=document.getElementById('id').getElementsByTagName('option');
- var all="";
- console.log(o[1]);
- for(var i=0;i<o.length;i++){
- if(o[i].selected){
- all+=o[i].value+",";
- }
- }
- all = all.substr(0, all.length - 1);//去掉末尾的逗号
- $("#bumen").val(all);//赋值给隐藏的文本框
- })
select2设置select多选,select2取值和赋值大概就这些了,也是网上找了很多资料,尝试了很多次,因为刚开始不知道$('#id').val(arr).trigger('change');里面的arr是个啥,最开始以为是数据,text,赋值了一些字符串,所以一直没用。
最新文章
- 基于注解的Spring多数据源配置和使用
- 小规模的流处理框架.Part 1: thread pools
- 【java基础】java的构造函数
- C语言学习012:将代码文件分成多个文件
- Nginx状态码499
- 优化IIS7.5支持10万个同时请求windows 2008 R2
- poj 2828 Buy Tickets(树状数组 | 线段树)
- 1.3 ODPS
- jQuery disabled 元素
- Convex Hull 实现理论+自制Python代码
- I2C(四)linux3.4(写代码)
- [TPYBoard - Micropython之会python就能做硬件 1] 运行第一个脚本——点亮LED
- vue,elementUI,less,axios,qs的安装及打包
- 谈谈那些年我们装B的并发编程
- Elasticsearch集群内的原理
- ubuntu安装mongo数据库
- Spring中的IOC示例
- [Luogu 2805] NOI2009 植物大战僵尸
- hsqldb
- java web登录界面 源代码