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为后端查询出来的选项,循环赋值

  1.  <select name="id" id="id" multiple="multiple">
  2.         <option value="0">请选择部门</option>
  3.         <volist name="list" id="vo">
  4.             <option value="{$vo.id}" <eq name="vo.id" value="$id">selected = "selected" </eq>>{$vo.name}</option>
  5.         </volist>
  6.     </select>

//可以另外设置一个隐藏的input框来存select选中的id,方便传给后端

 <input type="hidden" id="select_id" name="select_id"/>

//select2插件初始化

  1.   $("#id").select2({
  2.         language : "zh-CN",
  3.         minimumInputLength : 0,
  4.         placeholder:"可多选",//默认值
  5.         allowClear: true,
  6.     })

//select2插件赋值

  1.  var select_id = $("#select_id").val();
  2.     arr = select_id.split(",");//注意:arr为select的id值组成的数组
  3.     $('#id').val(arr).trigger('change');

//select2多选,取值,在下拉框中选中以后,获取到选择的id值

  1. $('#id').change(function(){
  2.             var o=document.getElementById('id').getElementsByTagName('option');
  3.             var all="";
  4.             console.log(o[1]);
  5.             for(var i=0;i<o.length;i++){
  6.                 if(o[i].selected){
  7.                     all+=o[i].value+",";
  8.                 }
  9.             }
  10.             
  11.             all = all.substr(0, all.length - 1);//去掉末尾的逗号
  12.             $("#bumen").val(all);//赋值给隐藏的文本框
  13.         })

select2设置select多选,select2取值和赋值大概就这些了,也是网上找了很多资料,尝试了很多次,因为刚开始不知道$('#id').val(arr).trigger('change');里面的arr是个啥,最开始以为是数据,text,赋值了一些字符串,所以一直没用。

最新文章

  1. 基于注解的Spring多数据源配置和使用
  2. 小规模的流处理框架.Part 1: thread pools
  3. 【java基础】java的构造函数
  4. C语言学习012:将代码文件分成多个文件
  5. Nginx状态码499
  6. 优化IIS7.5支持10万个同时请求windows 2008 R2
  7. poj 2828 Buy Tickets(树状数组 | 线段树)
  8. 1.3 ODPS
  9. jQuery disabled 元素
  10. Convex Hull 实现理论+自制Python代码
  11. I2C(四)linux3.4(写代码)
  12. [TPYBoard - Micropython之会python就能做硬件 1] 运行第一个脚本——点亮LED
  13. vue,elementUI,less,axios,qs的安装及打包
  14. 谈谈那些年我们装B的并发编程
  15. Elasticsearch集群内的原理
  16. ubuntu安装mongo数据库
  17. Spring中的IOC示例
  18. [Luogu 2805] NOI2009 植物大战僵尸
  19. hsqldb
  20. java web登录界面 源代码

热门文章

  1. Flutter Animation AnimatedBuilder
  2. z7z8记录
  3. 利用.bat脚本使得可运行jar开机自动运行
  4. 如何使用adb工具在电脑上使用程序的方式操控自己的android手机
  5. Linux查找工具locate和find
  6. cmd xcopy进行远程复制
  7. pyspark minHash LSH 查找相似度
  8. readme.txt 为什么我们不重视
  9. 织梦xss通杀所有版本漏洞【学习笔记】
  10. POJ3709 K-Anonymous Sequence