select2多選設定select多選,select2取值和賦值
阿新 • • 發佈:2018-12-19
select2設定select多選,select2取值和賦值,作為篩選條件的時候,取值相對簡單,把選中的id值轉為字串傳給後端查詢,查詢之後會重新整理頁面,為了在下拉框中顯示剛剛選中的值,就需要給select賦值,可以將剛才傳給後端的字串再傳回前端,然後轉為一位陣列,再賦值給select2就會顯示剛剛選中的值,賦值方法:$('#id').val(arr).trigger('change'),id為select的id屬性,這裡的arr是剛才從後端傳回前端的id轉成的一位陣列。
select2設定select多選,select2取值和賦值,首先需要引入select2的js檔案,select2官網地址
//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,賦值了一些字串,所以一直沒用。