select2 高度随主题变化：经典无法正常工作

Posted 2023-05-07

【中文标题】select2 高度随主题变化：经典无法正常工作

【英文标题】：select2 height change with theme: classic not working properly

【发布时间】：2021-09-21 19:24:49

【问题描述】：

当我尝试更改 select2 下拉菜单的高度时，箭头下拉菜单的高度不会改变，因此看起来很奇怪，文本也看起来很奇怪。如何使箭头下拉菜单的高度与选择高度匹配。

这是我的代码。

<select name="cars" id="cars">
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="mercedes">Mercedes</option>
  <option value="platform">Platform</option>
</select>
var select2 = $("select").select2(
theme: "classic",
);
select2.data('select2').$selection.css('height', '100px');

编辑：我想出箭头，但文字看起来仍然很奇怪。

.select2-selection__arrow 
    height: 100px !important;

【参考方案1】：

你必须使用三个类：

select2-selection__arrow 是箭头

select2-container .select2-selection--single 用于选择容器

select2-selection__rendered 用于渲染文本

如果您只想更改部分选择框，可以将自定义类添加到$container，如下所示：$($('#cars').data('select2').$container).addClass('carclass') 然后使用该类更改高度。

 $("select").select2(
            theme: "classic",
        );

$($('#cars').data('select2').$container).addClass('carclass')

.carclass .select2-selection__rendered 
            line-height: 100px !important;
        

   .carclass.select2-container .select2-selection--single 
            height: 100px !important;
        

     .carclass .select2-selection__arrow 
            height: 100px !important;
        

<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.6.0.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.13/js/select2.min.js"></script>
 
 <select name="cars" id="cars">
        <option value="volvo">Volvo</option>
        <option value="saab">Saab</option>
        <option value="mercedes">Mercedes</option>
        <option value="platform">Platform</option>
    </select>
    
     <select name="cars1" id="cars1">
        <option value="volvo">Volvo</option>
        <option value="saab">Saab</option>
        <option value="mercedes">Mercedes</option>
        <option value="platform">Platform</option>
    </select>

【讨论】：

有改变select2高度的类吗？我的代码仅适用于 1 选择 2，但我有 10 个，我不想为所有 10 个进行硬编码

这三个类对于所有 select2 下拉菜单都是通用的，并且会更改您拥有的任何下拉菜单的高度。你可以测试它的两个下拉菜单并仍然为它们工作

谢谢。问题如果我只想为 1 个 select2 索引做这件事会发生什么？我如何只针对 1 而不是全部？

您可以使用$($('#cars').data('select2').$container).addClass('carclass')添加自定义类。我更新了我的答案

是的，你的权利是因为data('select2') 只选择第一个选择框。改用 ID：$('#cars1').data('select2').$container.addClass('carclass'); $('#cars2').data('select2').$container.addClass('carclass');