Select2 文本框宽度异常答案

【问题标题】：Select2 textbox width misbehavingSelect2 文本框宽度异常
【发布时间】：2017-07-21 11:15:20
【问题描述】：

我在使用 select2 下拉列表时遇到了很多问题。

我在 wordpress 中工作，我的问题是选择框没有填满它的宽度。奇怪的是，下拉箭头在正确的位置，但选择“文本框”的宽度仅与当前选择的内容文本一样大。

See how the textbox is only as big as it´s content

这是我的代码：

HTML

<li>
            <label for="flokkur" >Flokkur <span class="required">*</span></label>
                <select name="flokkur" id="flokkur" class="sj_select2" style="width: 100%">
                    <option > Vörukaup m.Vsk</option>
                    <option > Rekstrarvörur og annar framl. kosntn. m.Vsk. </option>
                    <option> Rekstrar kostnaður húsnæðis m.Vsk. </option>
                    <option> Húsaleiga m. Vsk. </option>
                    <option> Húsaleiga án Vsk. </option>
                    <option> Gjalfærð smááhöld og búnaður m. Vsk.</option>
                    <option> Viðhald áhalda og tækja m. Vsk.</option>
                    <option> Ýmis akeypt þjónusta m. Vsk. </option>
                    <option> Ýmis skrifstofu kostnaður m. Vsk. </option>
                    <option> Lausafjár tækjaleiga m. Vsk.</option>
                    <option> Sölukostnaður auglýsingar og fl. m. Vsk.</option>
                    <option> Ýmis kostnaður með 11% Vsk. </option>
                    <option> Ýmis annar kostnaður (funda og Vsk.) án Vsk. </option>
                    <option> Risna og gjafir án Vsk.</option>
                    <option> Ferðakostnaður án Vsk. annar en rekstur bifreiðar </option>
                    <option> Rekstur bifreiðar Ökutæki án Vsk. </option>
                </select>

</li>

Javascript：

<script type="text/javascript">

jQuery(document).ready(function() {
  jQuery(".sj_select2").select2({
    width: '100%'
  });
    jQuery("#test_select").select2();
});
</script>

我尝试过各种解决方案，例如

jQuery(document).ready(function() { 
jQuery(".sj_select2").select2({ width: 'resolve' });           
});

或

jQuery(document).ready(function() { 
jQuery(".sj_select2").select2({ width: 'auto' });           
});

我也用 css 搞砸了很多试图解决这个问题，但到目前为止还没有运气。非常感谢任何帮助。

【问题讨论】：

以下答案是否适合您？
不幸的是没有，但我找到了解决方案。移除 select 元素周围的
标签解决了这个问题。