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

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

来源：oschina

链接：https://my.oschina.net/u/1020513/blog/2963115

标签

select2

Yii