• select2多选设置select多选,select2取值和赋值


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

  • 相关阅读:
    微信小程序开发前期准备
    怎样在vs2013和vs2015中实现自动编译sass
    在MVC中使用Bundle打包压缩js和css
    Html5 突破微信限制实现大文件分割上传
    Automapper 实现自动映射
    Polly一种.NET弹性和瞬态故障处理库(重试策略、断路器、超时、隔板隔离、缓存、回退、策略包装)
    关于transactionscope 事务的脏数据
    IIS设置session时长
    已禁用对分布式事务管理器(MSDTC)的网络访问的解决方法之一
    DAL.SQLHelper 的类型初始值设定项引发异常的处理
  • 原文地址:https://www.cnblogs.com/zhuyeshen/p/11984580.html
Copyright © 2020-2023  润新知