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

最新推荐文章于 2025-10-13 10:20:38 发布

原创最新推荐文章于 2025-10-13 10:20:38 发布 · 3.7k 阅读

0 ·

CC 4.0 BY-SA版权

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

51 篇文章

订阅专栏

jquery

6 篇文章

订阅专栏

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

部署运行你感兴趣的模型镜像

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');
});

您可能感兴趣的与本文相关的镜像