如何动态调整 select2 输入的大小，使其与所选选项的宽度相同？

Posted 2023-05-07

【中文标题】如何动态调整 select2 输入的大小，使其与所选选项的宽度相同？

【英文标题】：How can I dynamically resize a select2 input to be the same width as the selected option?

【发布时间】：2016-10-22 23:03:51

【问题描述】：

我正在使用一系列内联选择输入构建“自然语言”搜索表单，并使用 jQuery Select2 进行样式设置。 Select2 输入的宽度似乎设置为初始化时所选选项的宽度，这很棒。我只是不知道如何在更改所选选项时更新宽度。有什么想法吗？

非常感谢！

【参考方案1】：

尝试将其添加到您的 CSS 文件中：

.select2-container 
    width: 100% !important;

它解决了我使用 select2 调整大小的问题

（已编辑：我不使用占位符）

【讨论】：

它只设置容器宽度，但如果你有占位符 - 它会被剪切

这个修复了 Bootstap 3 问题

这么简单的修复 =)

最好不要使用 !important: .select2-container max-width: 100%;最小宽度：100%；由于问题通常是 Select2 太宽，因此只有 max-width 就足够了。

【参考方案2】：

您可以使用窗口调整大小功能。

例子：

// Fix select2 width
$(window).on('resize', function() 
    $('.form-group').each(function() 
        var formGroup = $(this),
            formgroupWidth = formGroup.outerWidth();
        
        formGroup.find('.select2-container').css('width', formgroupWidth);
        
    );
);

【讨论】：

谢谢，但不是我想要做的——我需要在更改所选选项时调整大小，而不是调整窗口大小。最后我找不到可行的解决方案，所以没有使用 Select2。

【参考方案3】：

只需要为网站做这样的事情

$(e).on("select2:closing", function(e) 
    if (e.hasOwnProperty('params') &&
        e.params.hasOwnProperty('args') && 
        e.params.args.hasOwnProperty('originalEvent') && 
        e.params.args.originalEvent.hasOwnProperty('target')) 
            var newWidth = $(e.params.args.originalEvent.target).width();
            var id = $(e.params.args.originalEvent.target).attr('id');
            var container = $("span[aria-labelledby=\""+id.split("-result")[0]+"-container"+"\"]");
            $(container).parents('span.select2').width(newWidth + 21);
    
);

这可能不是万无一失的，并且与当前的 API 相关联。但它会在下拉菜单关闭之前获取下拉菜单中元素的宽度，然后将其应用于容器。

需要注意的是，您可能需要浮动下拉项才能获得它们的实际大小。

.select2-results__option 
    float: left;
    clear: both;

【参考方案4】：

$('.select2-search__field').attr('style','width:auto');

$('.select2-search__field[placeholder=""]').attr('style','width:10px');

【参考方案5】：

我知道这是一篇旧帖子但是，我在使用 NMC 的代码时遇到了一个问题。

由于我无法评论他的回答，在使用他的代码后，我在使用 select2 下拉菜单后出现了一些烦人的滚动条，为了解决这个问题，我改用了 width auto。

.select2-container 
    width: auto !important;

【参考方案6】：

要动态调整 select2 的大小，您可以使用 width: 'style' 选项，如下所示：

$('#field_'+field.name).select2(
    placeholder: "select a option...",
    maximumSelectionLength: 1000 , 
    allowClear: true,
    ...
    width: 'style',
    data: data
);

接下来你必须使用style="width:100%;" 作为你的选择标签的属性。

<select class="input-element-item fontsize13" id="select2" style="width:100%;" >
    <option></option>
</select>

【参考方案7】：

除了响应宽度的问题，请阅读 Select2 的文档。一切都解释清楚了。

https://select2.org/appearance#container-width

<select class="js-example-responsive" style="width: 50%"></select>

$(".js-example-responsive").select2(
   width: 'resolve' // need to override the changed default
);