1. 程式人生 > >select2多選設定select多選,select2取值和賦值

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為後端查詢出來的選項,迴圈賦值

 <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 = bumen.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,賦值了一些字串,所以一直沒用。