YII2 Select2插件使用小計 原

先給出文檔的地址： https://www.yiiframework.com/extension/yii-select2

最近在看到很多網站給用戶打標籤，或者是多個下拉選擇之後變成一個標籤。覺得交互不錯！調研發現有開源的yii-select2這個插件，記錄下使用步驟；

1，composer安裝yii-select2插件，執行命令 composer require kartik-v/yii2-widget-select2 "@dev" 即可，之後就會自動加載到項目。

2，筆者這用的YII2框架，所以模板是混寫的代碼如下：

<?php
    echo $form->field($model, 'id')->widget(Select2::classname(), [
            'data' => $list,
            'options' => ['multiple' => true, 'placeholder' => '請選擇...'],
    ])->label('Label Name');
?>

其中變量$model，爲當前controller獲取數據model，$list是下拉列表的數組。kv結構。

3，這個插件在添加的時候沒有問題；但是在編輯的時候，需要使用js再次填充默認值。JavaScript腳本如下：

<script type="text/javascript">
    jQuery(document).ready(function () {
        //編輯時的默認值
        var list = <?= json_encode(array_column($list_default, 'id'))?>;
        var that = jQuery('#div-id');
        //觸發change事件，使數據初始化.
        that.val(list).trigger("change");
    });
</script>

這樣很簡單的就實現的複雜的頁面交互。不用寫複雜的js，也可以輕鬆搞定多下拉標籤的選擇。

當然此插件功能不侷限於此，它支持異步數據加載模式。所以如果在下拉列表數據量很大的，不能一次加載到前端頁面，就可以採用異步的模式。根據用戶輸入來檢索對應的選項，這就有點類似我們在使用搜索引擎的提示類似了。此處也不再列出異步加載的方式，感興趣可以自己下文檔或者搜索下相應的例子。