Question

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

非常感谢！

Answer 1

尝试将此添加到yor CSS文件中：

function add(x:string){
   return x+10;
}

它用select2

解决了我的调整大小问题

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

Answer 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);

    });
});

直播 - https://jsfiddle.net/Lwy6qnwy/

Answer 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;
}

Answer 4

我知道这是一篇老文章，但是，当我使用NMC的代码时遇到了一个问题。

由于我无法评论他的答案，因此在使用他的代码后，使用select2下拉列表后出现了一些令人讨厌的滚动条，为解决此问题，我改用了width auto。

.select2-container {
    width: auto !important;
}

Answer 5

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

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

Answer 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>

如何将select2输入动态调整为与所选选项相同的宽度？

6 个答案: