先给出文档的地址: https://www.yiiframework.com/extension/yii-select2
最近在看到很多网站给用户打标签,或者是多个下拉选择之后变成一个标签。觉得交互不错!调研发现有开源的yii-select2这个插件,记录下使用步骤;
1,composer安装yii-select2插件,执行命令 composer require kartik-v/yii2-widget-select2 "@dev" 即可,之后就会自动加载到项目。
2,笔者这用的YII2框架,所以模板是混写的代码如下:
field($model, 'id')->widget(Select2::classname(), [ 'data' => $list, 'options' => ['multiple' => true, 'placeholder' => '请选择...'], ])->label('Label Name');?>
其中变量$model,为当前controller获取数据model,$list是下拉列表的数组。kv结构。
3,这个插件在添加的时候没有问题;但是在编辑的时候,需要使用js再次填充默认值。JavaScript脚本如下:
这样很简单的就实现的复杂的页面交互。不用写复杂的js,也可以轻松搞定多下拉标签的选择。
当然此插件功能不局限于此,它支持异步数据加载模式。所以如果在下拉列表数据量很大的,不能一次加载到前端页面,就可以采用异步的模式。根据用户输入来检索对应的选项,这就有点类似我们在使用搜索引擎的提示类似了。此处也不再列出异步加载的方式,感兴趣可以自己下文档或者搜索下相应的例子。