Question

我试图增加select2下拉容器的高度，同时让其他容器保持默认高度。我的容器宽度是固定的，当我选择第二个选项时，我不希望将空行强行插入容器中（如果我使用＆＃39; height-min＆＃39;则会发生这种情况）。你see all this in the jsfiddle

有关如何控制第一个容器同时只留下第2个和第3个容器的任何想法？关于此的几个帖子似乎没有任何效果。

https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/js/select2.min.js
https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/css/select2.min.css


<select id="dropList1" style="width:125px;" multiple="multiple">
  <option value="Sun">Sun</option>
  <option value="Moon">Moon</option>
  <option value="Stars">Stars</option>
</select>
<br>
<br>
<br>
<select id="dropList2" style="width:125px" multiple="multiple">
  <option value="Earth">Earth</option>
  <option value="Wind">Wind</option>
</select>
<br>
<br>
<br>
<select id="dropList3" style="width:125px" multiple="multiple">
  <option value="Fire">Fire</option>
  <option value="Water">Water</option>
</select>




$("#dropList1").select2({ placeholder: "Select type",});
$("#dropList2").select2({ placeholder: "Select type",});
$("#dropList3").select2({ placeholder: "Select type",});



body {
padding: 30px;
}

.select2-container .select2-selection--multiple {
font-family: 'Arial', Verdana;
font-size: 12px;
box-sizing: border-box;
display: block;
height: 27px;
}

Answer 1

您只需将自定义类添加到所需的选择标记，并在css中包含所需的高度。以下是代码：

body {
padding: 30px;
}

.select2-container .select2-selection--multiple {
font-family: 'Arial', Verdana;
font-size: 12px;
box-sizing: border-box;
display: block;
height: 27px;
}
.ChangedHeight{
height: 200px!important;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/js/select2.min.js
https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/css/select2.min.css


<select id="dropList1" style="width:125px;" multiple="multiple">
  <option value="Sun">Sun</option>
  <option value="Moon">Moon</option>
  <option value="Stars">Stars</option>
</select>
<br>
<br>
<br>
<select id="dropList2" class="ChangedHeight" style="width:125px" multiple="multiple">
  <option value="Earth">Earth</option>
  <option value="Wind">Wind</option>
</select>
<br>
<br>
<br>
<select id="dropList3" style="width:125px" multiple="multiple">
  <option value="Fire">Fire</option>
  <option value="Water">Water</option>
</select>

您甚至可以在选择标记中添加内联样式。

Answer 2

您可以通过将其添加到您的css代码来增加高度

#dropList1 + .select2-container--default .select2-selection--multiple{
  height: 100px;
}

请注意，高度将是固定的

但是如果你想根据里面的元素自动增加它，你需要使用auto来代替

#dropList1 + .select2-container--default .select2-selection--multiple{
  height: auto;
}

这只会影响ID = ＃dropList1

的第一个选择

您还可以通过添加此代码来缩小输入字段中所选选项之间的空间，以避免不必要的换行符：

#dropList1 + .select2-container--default .select2-selection--multiple .select2-selection__choice{
      margin-right: 1px;
}

See JSfiddle

Answer 3

要覆盖第一个Select代码，请使用显示的CSS code

SELECT2插件使用了一种模式来为自定义HTML标记创建SELECT。因此，通过使用相同的模式，您可以覆盖所需的SELECT2标记。

$("#dropList1").select2({
  placeholder: "Select type",
});
$("#dropList2").select2({
  placeholder: "Select type",
});
$("#dropList3").select2({
  placeholder: "Select type",
});

body {
  padding: 30px;
}

.select2-container .select2-selection--multiple {
  font-family: 'Arial', Verdana;
  font-size: 12px;
  box-sizing: border-box;
  display: block;
  height: 27px;
}

#dropList1+.select2 .select2-selection--multiple {
  height: auto !important;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/css/select2.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/js/select2.min.js"></script>

<h3>Managing the wrapper height to collect all selected tags properly</h3>
<select id="dropList1" class="select-one" style="width:125px" multiple="multiple">
  <option value="Sun">Sun</option>
  <option value="Moon">Moon</option>
  <option value="Stars">Stars</option>  
</select>

<br>
<br>
<br>
<h3>Default behaviour of the SELECT tag, the tags flow out of wrapper.</h3>

<select id="dropList2" style="width:125px" multiple="multiple">
  <option value="Earth">Earth</option>
  <option value="Wind">Wind</option>
  <option value="Moon">Moon</option>
  <option value="Stars">Stars</option>  
</select>
<br>
<br>
<br>
<select id="dropList3" style="width:125px" multiple="multiple">
  <option value="Fire">Fire</option>
  <option value="Water">Water</option>
</select>

更改几个select2容器中的一个容器的高度

3 个答案: