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转成的一位数组。html

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插件初始化spa

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

    //select2插件赋值 .net

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
版权声明:本文为博主原创文章,转载请附上博文连接!code

相关文章
相关标签/搜索