select2组件在layer,bootstrap弹出层中使用需要注意z-index问题

最新推荐文章于 2025-01-10 10:48:19 发布

_必应

最新推荐文章于 2025-01-10 10:48:19 发布

阅读量3.7k

点赞数

分类专栏： javascript/es6/es7 jquery

本文链接：https://blog.youkuaiyun.com/jbguo/article/details/84584436

版权

javascript/es6/es7 同时被 2 个专栏收录

51 篇文章

订阅专栏

jquery

6 篇文章

订阅专栏

本文详细介绍了如何使用Select2组件进行高级配置，包括设置占位符、允许清除选择、最小输入长度、关闭选择、语言设置、指定下拉框的父元素以避免z-index问题，以及通过Ajax动态加载选项。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

dropdownParent: $("#selectCompany-box"), //指定其父元素可避免z-index小于layer
例：

$('#selectCompany').select2({
  placeholder: {
    id: -1,
    text: '输入公司名称',
  },
  allowClear: true,
  minimumInputLength: 2,
  closeOnSelect: true,
  language: 'zh-CN',
  dropdownParent: $("#selectCompany-box"), //指定其父元素可避免z-index小于layer
  ajax: {
    delay: 250,
    transport: function (params, success, failure) {
      var n = params.data.term;
      utils.searchCompany(n, function (data) {
        success(data.data.companies);
      });
    },
    processResults: function (data) {
      var d = [];
      $(data).each(function (i, e) {
        d.push({ id: e.id, text: e.name });
      });
      return { results: d };
    },
  },
});
$('#selectCompany').on('change', function (evt) {
  selectCompanyVM.company = $('#selectCompany').select2('val');
});