select2初始化預設值

風靈使發表於2018-07-04

之前用select2初始化預設值使用了select2('val','1')，這樣做沒問題，但只能用在單選上，多選的話，即使將val後面的值改成陣列['0','2']這種形式也沒用。

<script type="text/javascript">
    $(document).ready(function() {
      var data = [{ id: 0, text: 'aaa' }, { id: 1, text: 'bbb' }, { id: 2, text: 'ccc' }];
      $(".js-example").select2({
        data: data,
        placeholder: "請選擇啊"

      });
      $(".js-example").select2('val','1')
    });
</script>

<select class="js-example new-select" multiple="multiple">
</select>

這裡寫圖片描述

如何初始化出多選呢，在stackoverflow找到了答案，那就是用$(".js-example").val(['0','2']).trigger('change')這種方法。

把上面程式碼中的$(".js-example").select2('val','1')換成$(".js-example").val(['0','2']).trigger('change')就OK了。
這裡寫圖片描述

select2設定預設值

一般jq的select進行賦值就是

$('select').val('3')

實踐證明：select2的賦值方法並非如此，

for example：

<!DOCTYPE html>

<html>

<head>

<metacharset="UTF-8">

<title></title>

<linkrel="stylesheet"type="text/css"href="bootstrap.min.css"/>

<linkrel="stylesheet"href="select.min.css"/>

</head>

<body>

<selectid="select1"multiple="multiple"style="width:200px;display:block;margin:300px;">

<option value="0">西瓜</option>

<option value="1">蘋果</option>

<option value="2">橘子</option>

</select>

</body>

<scripttype="text/javascript"src="6選項卡/js/jquery-1.11.3.js"></script>

<script src="select2.js"></script>

<script>

$('#select1').select2();

       $('#select1').val(['1']).trigger('change');//這個就是select2的賦值方式。而val裡的就是option的value

</script>

</html>

最後的結果就是預設顯示為：

這裡寫圖片描述

補充：
可以對select進行復制多個值—可以進行陣列的賦值

var arr = ['1','2','3'];
$('#select1').val(arr).trigger('change');

相關文章