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為后端查詢出來的選項,循環賦值

  1.   <select name="id" id="id" multiple="multiple">
  2.          <option value="0">請選擇部門</option>
  3.          <volist name="list" id="vo">
  4.              <option value="{$vo.id}" <eq name="vo.id" value="$id">selected = "selected" </eq>>{$vo.name}</option>
  5.          </volist>
  6.      </select>


    //可以另外設置一個隱藏的input框來存select選中的id,方便傳給后端

 <input type="hidden" id="select_id" name="select_id"/>

//select2插件初始化

  1.   $( "#id").select2({
  2.          language : "zh-CN",
  3.          minimumInputLength : 0,
  4.          placeholder:"可多選",//默認值
  5.         allowClear: true,
  6.     })


    //select2插件賦值 

  1.   var select_id = $("#select_id").val();
  2.     arr = select_id.split( ",");//注意:arr為select的id值組成的數組
  3.     $( '#id').val(arr).trigger('change');


    //select2多選,取值,在下拉框中選中以后,獲取到選擇的id值

  1. $( '#id').change(function(){
  2.             var o=document.getElementById('id').getElementsByTagName('option');
  3.             var all="";
  4.             console.log(o[1]);
  5.             for(var i=0;i<o.length;i++){
  6.                 if(o[i].selected){
  7.                     all+=o[i].value+ ",";
  8.                 }
  9.             }
  10.             
  11.             all = all.substr( 0, all.length - 1);//去掉末尾的逗號
  12.             $( "#bumen").val(all);//賦值給隱藏的文本框
  13.         })

select2設置select多選,select2取值和賦值大概就這些了,也是網上找了很多資料,嘗試了很多次,因為剛開始不知道$('#id').val(arr).trigger('change');里面的arr是個啥,最開始以為是數據,text,賦值了一些字符串,所以一直沒用。


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM