当前位置: 首页 > 未分类>阅读正文

select2初始化并设置宽度

2022.8.6 朱丰华 40 次 留下评论 801字

select2不能自动识别宽度,这里使用 js 计算option最大文本长度。

然后 length * 16,最后得到的结果,作为 select2 的宽度。

<select class="js-example-basic-single" name="state" style="width:auto;">
    <option value="AL">Alabama</option>
    <option value="WY">bbwerfewfffewf</option>
</select>

<script src="https://www.52dixiaowo.com/tools/npm/jquery@3.6.0/dist/jquery.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" />
<script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>




<script>
    $(document).ready(function() {
        let ele = '.js-example-basic-single';
        let options = $(ele + ">option");
        let maxLength = 0;
        for (let i = 0; i < options.length; i++) {

            let length = options[i].text.length * 16;
            if (length > maxLength) {
                maxLength = length
            }
        }
        $('.js-example-basic-single').select2({
            width: maxLength
        });
    });
</script>

本篇完,还有疑问?留下评论吧

发表评论

您的电子邮箱地址不会被公开。 必填项已用*标注