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，也能够轻松搞定多下拉标签的选择。

固然此插件功能不局限于此，它支持异步数据加载模式。因此若是在下拉列表数据量很大的，不能一次加载到前端页面，就能够采用异步的模式。根据用户输入来检索对应的选项，这就有点相似咱们在使用搜索引擎的提示相似了。此处也再也不列出异步加载的方式，感兴趣能够本身下文档或者搜索下相应的例子。