Select2正在复制我的下拉列表 [英] Select2 is duplicating my dropdown list
问题描述
HTML
< ; p class =form-control input -lg>< label for =industry> Industry< / label> ;:
< option value =选择selected =selected>< / option>
{行业中的行业％}
< option value ={{industry}}> {{industry}}< / option>
{％endfor％}
< / select>
< / p>
JQuery
< script type =text / javascript>
$（document）.ready（function（）{
$（＃industry）。select2（）;
$
}）;
我发现问题是由我使用的原始列表元素的CSS。 Select2通过将类select2-hidden-accessible应用于我所写的实际选择字段来工作;该类有CSS除其他外缩小原始选择字段1px宽度，因此它是不可见的。然后它根据原始select元素的内容呈现具有select2功能的自己的span类。 .form_inputs上的CSS选择{}将重叠缩小到1px宽度。
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();
$
});
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.
这篇关于Select2正在复制我的下拉列表的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
