iziModal中使用Select2出现选择框重复无法点击或无选项如何解决？

• 重复初始化：你将iziModal、Select2的初始化逻辑都放在了showModal函数内，每次触发弹窗时都会重复执行初始化逻辑，多次生成Select2实例对应多个DOM节点，就会出现重复选择框的问题。
• 类名绑定错误：你尝试用.Select2（大写S开头）初始化时，该类名是Select2组件自身渲染生成的容器类，并非你原始<select>标签绑定的类，绑定错误导致无法关联原有option选项，自然点击后无内容展示。

1. 调整初始化逻辑 #

将iziModal的初始化放到全局仅执行一次，同时利用iziModal的生命周期回调处理Select2的初始化和销毁，避免重复渲染：

// 页面加载完成后全局初始化一次iziModal
$(document).ready(function () {
  $("#myIziModal").iziModal({
    title: "info",
    // 模态框完全打开后再初始化Select2
    onOpened: function () {
      // 先销毁已存在的Select2实例，避免重复渲染
      if ($('.mySelect2').hasClass('select2-hidden-accessible')) {
        $('.mySelect2').select2('destroy');
      }
      // 初始化Select2
      $('.mySelect2').select2({
        dropdownParent: $('#myIziModal'),
        width: '150px'
      });
    },
    // 模态框关闭时销毁Select2实例，释放资源
    onClosed: function () {
      if ($('.mySelect2').hasClass('select2-hidden-accessible')) {
        $('.mySelect2').select2('destroy');
      }
    }
  });
});

// 弹窗触发函数仅保留打开逻辑
function showModal() {
  $("#myIziModal").iziModal('open');
}

2. 可选：层级适配 #

如果调整后仍出现点击选择框无选项展示的问题，大概率是Select2下拉框的层级低于iziModal，添加以下CSS调整层级即可：

.select2-container--open {
  z-index: 99999 !important;
}

内容的提问来源于stack exchange，提问作者user16829612