Question

我在select2下拉列表中遇到了很多麻烦。

我在wordpress工作，我的问题是选择框没有填充其宽度。奇怪的是，下拉箭头位于正确的位置，但是选择＆＃34;文本框的宽度为＃34;仅与当前选定的内容文本一样大。

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搞砸了很多，试图说明这一点，但到目前为止还没有运气。任何帮助都非常感谢。

Answer 1

我认为select2 js或css文件中有一些问题。请试试这段代码。这里我已经包含了最新的css和js（ 4.0.3 ）

＆＃13;

	jQuery(document).ready(function() {
  jQuery(".sj_select2").select2({
    width: '100%'
  });
    jQuery("#test_select,#test1").select2();
});

＆＃13;

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/css/select2.css">
  <script
  src="https://code.jquery.com/jquery-3.2.1.min.js"
  integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4="
  crossorigin="anonymous"></script>
  <script
  src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/js/select2.min.js"
  crossorigin="anonymous"></script>
  
  <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>
<div style="margin-top:10px"></div>
<select name="test1" id="test1" class="sj_select2">
                    <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>

＆＃13;

我希望这可以解决您的问题。

Answer 2

在我的情况下，上述解决方案无法解决此问题。

最终对我有用的解决方案就是删除包含select元素的列表“li”标签。

选择2文本框宽度行为不当

2 个答案: