Jquery 如何在初始化后动态更改select2宽度

我在应用程序页面的右侧有一个信息面板。 可以通过拖动和移动边框来调整此面板的宽度（例如，可以在windows finder中调整列的大小） 在面板中，我有一个select2来搜索一些东西。我使用select2初始化此选项

    let infoPanelSiteId = $('#infoPanelSiteId');
    infoPanelSiteId.select2(
        {
            ajax:
                {
                    dataType: 'json',
                    delay: 250,
                    url: BACKEND_URL + '/infopanel/searchsites.php',
                    processResults: function (data)
                    {
                        return {results: data.data};
                    }
                },
            width: infoPanel.width - 15,
            placeholder: i18next.t('default:infopanel.site.search')
        })
        .on('change', function ()
        {
            let data = infoPanelSiteId.select2('data');
            if (data[0])
            {
                data = data[0];
                InfoPanel.setInfoPanelSiteById(data.id);
            }
        });

现在，如果用户调整信息面板的大小，则select2不会调整大小，因为它具有固定的宽度。 问题是，面板的显示使用了display:table和display:table单元格，这是出于其他目的所必需的。所以我不能使用width:100%或width:auto，因为表格单元格忽略了css宽度

因此，我寻找在select2容器中更改内联宽度的可能性

select2 select2-container select2-container--default select2-container--below

我试过了

$('#infoPanelSiteId').next().css('width' : (infopanel.width -10) + 'px !important');

及

但这是行不通的

有什么建议吗

编辑：

这是一把小提琴，它应该如何工作，但它没有

---

如果要在类

选择2 container--below

出现时更改宽度，请执行以下操作：（事件打开和关闭）

$（'#示例'）。选择2（）；
$（'#示例'）。在（'select2:open'，函数（e）上{
$（“body>span.select2 container--below”）.css（“width”，“100px”）；
});
$（“#示例”）。在（'select2:close'，函数（e）上{
$（“body>span.select2 container--below”）.css（“width”，“300px”）；
});
//$（'#示例'）。选择2（{dropdownCssClass:'bigdrop'}）
.bigdrop{
宽度：100px！重要；
}

苹果
球棒
猫
狗
大象
查看/曝光
查看/曝光
虚拟数据
虚拟数据
虚拟：数据
虚拟（数据）
向父页面添加css并不能解决您的问题？喜欢使用/deep/在body中为所需的元素类设置css，有时是包的代码本身，它通过js设置css，因此尝试重写它可能不会给您带来期望的结果，因为您无法真正看到其中实际发生的情况。我建议您尝试通过普通css对其进行更改，并在主体范围，并通过媒体查询处理调整大小要求。我确信您可以通过css访问元素，如
body>>。请选择下面的2 container--对不起，我不明白。我需要将宽度设置为100-300px的值，每个像素介于两者之间。所以我不能为每个宽度创建css样式。你能给我一个详细的答案吗？我的意思是试着把你代码中的css选择器改成
body>>。select2…
或者任何我没有明确说明我想要实现的select2容器的可访问的直接父对象。这不是关于下拉框，而是关于选择本身。我在我的问题中添加了一个小提琴，所以你可以帮助它工作。是的，重新初始化是我已经做过的事情，但这是一个真正的开销，因为每次拖动鼠标移动时都会出现调整大小事件。但如果这是我唯一需要走的路。thanks@ClausBönnhoff好的，我已经更新了我的最后一个代码片段，没有重新初始化，设置了宽度分辨率并设置了正确的选择器，我从用html样式定义的400px开始，然后非常感谢。这就是我一直在寻找的
$('.select2-container--below').css('width' : (infopanel.width -10) + 'px !important');

$('#yourselect2ID').on('select2:open', function (e) {
   $("body > span.select2-container--below").css("width", "600px");
});