Select2 正在复制我的下拉列表

Question

Select2 正在复制我的下拉列表，所以我既有原始选择列表，也有 select2 选择框，我无法在我的项目之外重新创建它，所以它可能是一个导入，有人之前经历过类似的事情或知道什么进口可能是造成这种情况的原因吗？我能找到的唯一信息是关于 jquery Growthfield 的，但我没有。谢谢！

HTML

<p class="form-control input-lg"><label for="industry">Industry</label>:
    <select class="industry" id="industry" name="industry">
        <option value="Select" selected="selected"></option>
        {% for industry in industries %}
            <option value="{{ industry }}">{{ industry }}</option>
        {% endfor %}
    </select>
</p>

JQuery

 <script type="text/javascript">
     $(document).ready(function () {
     $("#industry").select2();
     $
 });

Answer 1

我发现问题是由于我在原始列表元素上使用了 css 引起的。

Select2

的工作原理是将类

select2-hidden-accessible

应用于我编写的实际选择字段。

该类具有 CSS，除其他外，可将原始选择字段缩小到 1px 宽度，使其不可见。
然后，它根据原始 select 元素的内容呈现自己的

span

类，这些类具有

select2

功能。

.form_inputs select{}

 上的 

CSS 覆盖了这个缩小到

1px width

。

Answer 2

它很旧，但总是有用！

我忘记导入 select2 的 CSS...这就是为什么它不起作用并显示 select2 两次。

希望对您有帮助！

Answer 3

我在 Select2 中遇到了同样的情况，其中只有第一个下拉菜单起作用，而在向前和向后浏览器导航期间创建的重复下拉菜单不起作用。为了解决这个问题，我选择删除所有其他下拉菜单，只保留第一个。然后我利用了“popstate”事件。

当用户浏览会话历史记录期间活动历史记录条目发生更改时，会触发 Window 界面的 popstate 事件。此事件调整当前历史记录条目以匹配用户访问的最后一个页面，或者，如果适用，历史记录条目。

$(window).on('popstate', function(event) {
   $('.select2-container:not(:first)').remove();
   });

Answer 4

在我的例子中，我有一个动态表单，它在同一元素上多次调用

.select2()

方法，这开始扰乱 CSS 并最终开始进行重复输入。 因此，每当使用标识符调用方法时（在OP的情况下

"#industry"

），我首先检查它是否还没有类

select2-hidden-accessible

（受到cico_dev的答案的启发），因为如果它已经拥有该类，那么它就已经初始化了。

$('.select2').each(function() {
                // Check if the element has already been initialized
                if (!$(this).hasClass('select2-hidden-accessible')) {
                    // If not initialized, apply select2
                    $(this).select2();
                }
            });