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>
本篇完,还有疑问?留下评论吧