您现在的位置是：首页 > 技术人生 > 前端技术前端技术

如何取消select2插件下拉框向上展示

高晓波2021-08-29【前端技术】人已围观

简介使用select2下拉框插件时，有时由于下拉框高度问题导致下拉选项向上展示，影响显示效果。
通过修改select2源码，使select2固定向下展示选项。

使用select2下拉框插件时，有时由于下拉框高度问题导致下拉选项向上展示，影响显示效果。


select2


通过修改select2源码，使select2固定向下展示选项。

通过查看页面html源码，我们看到向上展示时出现select2-dropdown--above，猜测此class为控制选项向上，在select2.js搜索关键字select2-dropdown--，找到如下片段进行修改：

  
    if (newDirection != null) {
      this.$dropdown
        .removeClass('select2-dropdown--below select2-dropdown--above')
        .addClass('select2-dropdown--' + newDirection);
      this.$container
        .removeClass('select2-container--below select2-container--above')
        .addClass('select2-container--' + newDirection);
    }
修改为：
  
    if (newDirection != null) {
      this.$dropdown
        .removeClass('select2-dropdown--below select2-dropdown--above')
        .addClass('select2-dropdown--below');
      this.$container
        .removeClass('select2-container--below select2-container--above')
        .addClass('select2-container--below');
    }


 

Tags：select2

很赞哦！ ()

上一篇：select2插件在booststrap Modal中搜索框不能输入

下一篇：返回列表

相关文章

随机图文

文章评论