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,赋值了一些字符串,所以一直没用。

select2多选设置select多选,select2取值和赋值的更多相关文章

  1. JQuery select与radio的取值与赋值

    radio 取:$("input[name='NAME']:checked").val(); 赋:$("input[name='NAME'][value='指定值']&q ...

  2. jquery select取值,赋值操作

    select">jquery select取值,赋值操作 一.获取Select 获取select 选中的 text : $("#ddlRegType").find( ...

  3. 浅谈jquery关于select框的取值和赋值

    浅谈jquery关于select框的取值和赋值   jQuery("#select_id").change(function(){}); // 1.为Select添加事件,当选择其 ...

  4. angularjs中设置select的选中项

    最近用angularjs比较多,里面有很多自己的方法,都不咋会用,这篇只是个笔记,防止自己忘记 <select style="width:100%" ng-model=&qu ...

  5. bootstrap select 多选的用法,取值和赋值(取消默认选择第一个的对勾)

    h5自带的select标签可以实现按住ctrl键多选的功能,但是样式及其难看. bootstrap select是很好用的前端插件 ​ 首先引入bootstrap和bootstrap-select的c ...

  6. Element-ui 下拉列表 全选 多选时 select全选 新增一个选择所有的选项

    项目里经常会用到,在一个多选下拉框里新增一个选择所有的选项,例如: <!DOCTYPE html> <html lang="en"> <head> ...

  7. jquery 获取和设置 select下拉框的值(转手册)

    ##实例应用中遇到的问题 //在某事件响应的应用中设置select选中项,前两种情况的设置不生效,使用了最后一种用法才生效的 //$("#select_time").find(&q ...

  8. jquery 获取和设置 select下拉框的值

    获取Select : 获取select 选中的 text : $("#ddlRegType").find("option:selected").text(); ...

  9. JQuery获取和设置select下拉框的值

    获取Select : 获取select 选中的 text : $("#sid").find("option:selected").text(); 获取selec ...

随机推荐

  1. Jboss部署war以及获取Resource的真实路径

    Jboss部署war以及获取Resource的真实路径 最近在将一个SpringBoot项目打成war包部署到Jboss中,中途遇到一些问题记录. Jboss上部署war 普通的SpringBoot项 ...

  2. 命令行获取docker远程仓库镜像列表

    命令行获取docker远程仓库镜像列表 获取思路 通过curl获取镜像tag的json串,解析后得到${image}:${tag}的格式 curl获取示例 # curl [:-s] ${API}/${ ...

  3. redux的理解

    Redux 这里介绍下我对Redux的理解,不涉及如何使用Redux. Redux 官网介绍: A predictable state container for JavaScript apps.(一 ...

  4. Qt 利用飞机图片画五边形

    最近练习Qt,需要一个飞机在屏幕上画五边形.虽然达到的效果不是非常的理想,但是勉强还是达到了效果,欢迎大家指正.用到的飞机图片如下. 第一步:初始化,在构造函数里面,把图片向左旋转18° );ui.l ...

  5. apk反编译工具包for Mac OS的使用

    在本文中我将介绍如何在Mac OS X上使用apktool.jar.dex2jar.jd-gui来进行apk的反编译和查看源码.下面会提供每个工具的下载地址. 测试环境:OS X EI Capitan ...

  6. 程序员常用的3大Web安全漏洞防御解决方案:XSS、CSRF及SQL注入(图文详解)

    https://blog.csdn.net/ChenRui_yz/article/details/86489067 随着互联网的普及,网络安全变得越来越重要,程序员需要掌握最基本的web安全防范,下面 ...

  7. React组件库Ant Design的安装与使用

    一.什么是 Ant Design 1.Ant Design 提炼自企业级中后台产品的交互语言和视觉风格 2.Ant Design 使用 TypeScript 构建,提供完整的类型定义文件 二.Ant ...

  8. linux系统编程综合练习-实现一个小型的shell程序(一)

    之前已经花了不少篇幅学习了linux系统编程的很多知识点:文件与io.进程.信号.管道,而零散的知识点,怎么能够综合的串接起来是学习的一个很重要的目的,当然最好的方式就是用所学的知识点做一个项目了,所 ...

  9. ubuntu14.04 部署nfs服务

    安装nfs服务 apt-get install nfs-kernel-server 修改配置文件,共享目录为/var/www,*号可替换为客户端IP地址,*默认为任何部署了nfs客户端的IP可以挂载该 ...

  10. Mysql存储引擎中InnoDB与Myisam的区别

    1. 事务处理innodb 支持事务功能,myisam 不支持.Myisam 的执行速度更快,性能更好. 2. select ,update ,insert ,delete 操作MyISAM:如果执行 ...