Select2 正在复制我的下拉列表

Question

Select2 is duplicating my dropdown list so I have both the original select list and also the select2 select box, I have been unable to recreate it outside of my project so it could be an import perhaps, has anybody experienced anything similar before or know what imports could be causing it? The only information I could find was on jquery growfield which I do not have. Thanks!

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

I found out that the issue was caused by my use of css on the original list element.
Select2 works by applying the class select2-hidden-accessible to the actual select field I wrote.

That class has CSS that, among other things, shrinks the original select field to 1px width so it is not visible.
Then it renders its own span classes that have the select2 functionality based on the content from the original select element.

CSS on .form_inputs select{} was overriding this shrinking to 1px width .

Answer 2

It's old but always useful !

I forgot to import the CSS for select2... That was why it didn't work and displayed the select twice.

I hope it'll be helpful !