本文主要是介绍yii2-krajee-select2 插件的两个“坑”，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！
到写这个的时候，yii2-krajee-select2插件版本v2.1.0，坑还在
首先说，yii2 krajee select2插件就是按yii2插件方式包装的jquery插件select2，这个select2还是很好用的，最大特色是下拉列表项目很多的时候，它支持模糊搜索并选择，也支持多选，也可以禁用某些项目，总之，是对select的极大增强。
但在实际使用过程中，遇到了两个需要绕行的“坑”：1、在jquery 的模态对话框（modal dialog）中使用时，会出现显示不全或者搜索框无法点击聚焦的情况，这个是select2的毛病；2、同一个表单中多个select2，表单复位时，只能复位最后一个select2，这个其实是yii2-krajee-select2的毛病
第一个问题的解决方案：
插件设定 id（options中可以设置placeholder和id），然后写js代码，给对应插件设定dropdownParent属性为modal dialog的id （通常是index视图中class为modal fade的那个，即模态对话框最外层）
第二个问题的问题所在与解决方案：
karik-v/yii2-widget-select2/assets/js/select2-krajee.js文件131-137行：
if (doReset) {$el.closest("form").off('.krajees2').on("reset.krajees2", function () {setTimeout(function () {$el.trigger("change").trigger("krajeeselect2:reset");}, 100);});}
对应插件$el给表单复位事件添加事件处理器时，on的同时off了（即它自己事件处理完了就把对应处理代码注销了），这样，其余更多的select2虽然添加了同样的事件处理器，但在触发时，还没等到处理，事件处理器已经被注销了。经过试验，把off('.krajees2')删除，就不存在问题，但直接改作者源码，下次composer update时麻烦就大了，所以，我们改为让最后一个select2去帮助手动复位上一个，上一个再复位上一个或者最后一个负责前面所有的复位
$this->registerJs("
var s2Options = eval($('#labclass-search-course-ids').attr('data-krajee-select2'));
s2Options.dropdownParent = $('#labclass-front-advanced-search');
"); <?= $form->field($model, 'course_ids')->widget(Select2::className(), [ //modal dialog内必须设定 dropdownParent'data' => Course::getItems(null, $model->term_id),'options' => ['multiple' => true, 'placeholder' => '仅显示本学期课程', 'id' => 'labclass-search-course-ids'],'pluginOptions' => ['allowClear' => true]]) ?><?= $form->field($model, 'exe_teacher_ids')->widget(Select2::className(), ['data' => User::getItems(),'options' => ['multiple' => true, 'placeholder' => '可选多位教师', 'id' => 'labclass-search-et-ids'],'pluginOptions' => ['allowClear' => true],]) ?><?= $form->field($model, 'room_ids')->widget(Select2::className(), [ //已经有元素设定 dropdownParent'data' => $roomItems,'options' => ['multiple' => true, 'placeholder' => '可选多个房间', 'id' => 'labclass-search-room-ids'],'pluginOptions' => ['allowClear' => true],'pluginEvents' => [ //krajee Select2插件似乎存在bug，只能随表单复位最后一个select2"change" => "function() {$('#labclass-search-et-ids').trigger('change').trigger('krajeeselect2:reset');$('#labclass-search-course-ids').trigger('change').trigger('krajeeselect2:reset');}",],]) ?>另外，在 bootstrap modal dialog （模态对话框）中显示 multiple （多选）的 select2 时， placeholder 字符串长一点初始显示会不完全，暂时似乎没有好办法，只能给 modal dialog 添加显示时触发来修改了，类似如下
$this->registerJs("
$('#lab-class-search-modal').on('show.bs.modal', function (e) {$('input.select2-search__field').each(function () {$(this).width('100%')})
})
", $this::POS_END); // 确保 多选select2 的 placeholder 显示完全这篇关于yii2-krajee-select2 插件的两个“坑”的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
