select2多选设置select多选，select2取值和赋值

版权声明：转载请注明出处 https://blog.csdn.net/wengedexiaozao/article/details/83753825
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，赋值了一些字符串，所以一直没用。
---------------------
作者：稳哥的小灶
来源：CSDN
原文：https://blog.csdn.net/wengedexiaozao/article/details/83753825
版权声明：本文为博主原创文章，转载请附上博文链接！

转载于:https://www.cnblogs.com/sherryweb/p/11132672.html