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

Question

我的应用程序页面右侧有一种信息面板。可以通过拖动和移动边框来调整此面板的宽度（例如，您可以在 windows 查找器中调整列的大小）在面板中，我有一个 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-cell，这是其他用途所必需的。所以我不能使用 width: 100% 或 width: auto 因为 table 单元格会忽略 css 宽度。

所以我寻找一种可能性来改变 select2 容器中的内联宽度

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

我试过

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

和

$('.select2-container--below').css('width' : (infopanel.width -10) + 'px !important');

但这不起作用。

有什么建议吗？

编辑：

这里是 fiddle 它应该如何工作但它没有

https://jsfiddle.net/wazrdky2/

Answer 1

如果您想在 class select2-container--below 出现时更改宽度，请执行以下操作：（事件打开和关闭）

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

$('#example').select2();



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

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

//$('#example').select2({dropdownCssClass : 'bigdrop'});

.bigdrop {
    width: 100px !important;
}

<html>
  <body>
    <link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" />
<script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>

<select id="example" multiple="multiple" style="width: 300px">
    <option value="Apple">Apple</option>
    <option value="Bat">Bat</option>
    <option value="Cat">Cat</option>
    <option value="Dog">Dog</option>
    <option value="Elephant">Elephant</option>
    <option value="View/Exposure">View/Exposure</option>
    <option value="View / Exposure">View / Exposure</option>
    <option value="Dummy - Data">Dummy - Data</option>
    <option value="Dummy-Data">Dummy-Data</option>
    <option value="Dummy:Data">Dummy:Data</option>
    <option value="Dummy(Data)">Dummy(Data)</option>    
</select>

  </body>
</html>

或者您可以像这样使用自定义 CSS 样式：

$('#yourselect2ID').select2({dropdownCssClass : 'bbbdrop'});

.bbbdrop {
    width: 100px !important;
}

$('#example').select2({dropdownCssClass : 'bigdrop'});

.bigdrop {
    width: 100px !important;
}

<html>
  <body>
    <link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" />
<script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>

<select id="example" multiple="multiple" style="width: 300px">
    <option value="Apple">Apple</option>
    <option value="Bat">Bat</option>
    <option value="Cat">Cat</option>
    <option value="Dog">Dog</option>
    <option value="Elephant">Elephant</option>
    <option value="View/Exposure">View/Exposure</option>
    <option value="View / Exposure">View / Exposure</option>
    <option value="Dummy - Data">Dummy - Data</option>
    <option value="Dummy-Data">Dummy-Data</option>
    <option value="Dummy:Data">Dummy:Data</option>
    <option value="Dummy(Data)">Dummy(Data)</option>    
</select>

  </body>
</html>

你可以混合使用：

$('#example').select2({dropdownCssClass : 'bigdrop'});

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

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

.bigdrop{
    width: 100px !important;

}

<html>
  <body>
    <link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" />
<script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>

<select id="example" multiple="multiple" style="width: 300px">
    <option value="Apple">Apple</option>
    <option value="Bat">Bat</option>
    <option value="Cat">Cat</option>
    <option value="Dog">Dog</option>
    <option value="Elephant">Elephant</option>
    <option value="View/Exposure">View/Exposure</option>
    <option value="View / Exposure">View / Exposure</option>
    <option value="Dummy - Data">Dummy - Data</option>
    <option value="Dummy-Data">Dummy-Data</option>
    <option value="Dummy:Data">Dummy:Data</option>
    <option value="Dummy(Data)">Dummy(Data)</option>    
</select>

  </body>
</html>

如果你想动态设置 select2 的宽度，而不用重新初始化它：（改变选择器）

    let width = 300;
    
    let infoPanelSiteId = $('#infoPanelSiteId');
        infoPanelSiteId.select2(
            {
                
                width: "resolve",
                placeholder: 'Placeholder'
            })
            .on('change', function ()
            {
            });

    let interval = setInterval(() =>
  {
    width +=10;
    
        $(".infopanelPanel span.select2-container").css("width", width + "px");
    if(width == 500)
        clearInterval(interval);
  }, 500);

<html>
  <body>
    <link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" />
<script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>

    <div class = "infopanelPanel">
        <div class = "infoPanelTitleDiv">
            <div class = "infoPanelTitleText">
                <label><select id = "infoPanelSiteId" class = "editSelect" style="width:400px">
                     <option value="Apple">Apple</option>
                      <option value="Bat">Bat</option>
                      <option value="Cat">Cat</option>
                      <option value="Dog">Dog</option>
                </select></label>
            </div>
        </div>
    </div>
  </body>
</html>

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

How to change select2 width dynamically after init

jquery

jquery-select2