时间戳

首页 > 解决方案 > 初始化后如何动态更改select2宽度

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-cell，这是其他用途所必需的。所以我不能使用 width: 100% 或 width: auto 因为表格单元格确实忽略了 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');

但这不起作用。

有什么建议么？

编辑：

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

https://jsfiddle.net/wazrdky2/

标签： jqueryjquery-select2

解决方案

如果您想在类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>

推荐阅读