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