首页 > 编程知识 正文

select多选框赋值,select设置选中值

时间:2023-05-05 06:12:32 阅读:222088 作者:2311

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

 

阿里云学生机(24岁以下自动获得学生身份)优惠地址,服务器购买,各种云服务购买:https://promotion.aliyun.com/ntms/act/campus2018.html?userCode=cyn41gba

腾讯云双十一优惠:
https://cloud.tencent.com/act/cps/redirect?redirect=1048&cps_key=1f197f58b18ff5752c34467efca408fc&from=console

版权声明:该文观点仅代表作者本人。处理文章:请发送邮件至 三1五14八八95#扣扣.com 举报,一经查实,本站将立刻删除。