jquery - 如何固定多选的高度和宽度

Question

当我在一个选择元素中连续选择多个选项时，显示当前选择的区域会不断扩大，如下图所示:

我想做的是我希望在选择多个选项时修复选择元素。就像下面的例子:

我看到了这个question但我不明白他是怎么做到的。

$(".chosen-select").chosen({
  no_results_text: "Oops, nothing found!"
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdn.rawgit.com/harvesthq/chosen/gh-pages/chosen.jquery.min.js"></script>
<link href="https://cdn.rawgit.com/harvesthq/chosen/gh-pages/chosen.min.css" rel="stylesheet"/>


<select data-placeholder="Choose Username" multiple class="chosen-select" name="selectLDAP" id="selectLDAP" onchange='a()'>
    <option value=""></option>
    <option value='option1'>option1</option>
    <option value='option2'>option2</option>
    <option value='option3'>option3</option>
    <option value='option4'>option4</option>
    <option value='option5'>option5</option>
</select>

Answer 1

在 CSS 中，您可以为选择组件本身添加高度，但您还必须定义“overflow-y: auto”以获取滚动条(而不仅仅是溢出元素)。

这里真正的问题是确定要设置样式的元素。 jQuery 不会在您编写时保留您的选择 - 它呈现不同的东西:

<div class="chosen-container chosen-container-multi" title="" id="selectLDAP_chosen" style="width: 70px;">
  <ul class="chosen-choices">
    <li class="search-choice"><span>option1</span><a class="search-choice-close" data-option-array-index="1"></a></li><li class="search-field">
      <input class="chosen-search-input" autocomplete="off" value="Choose Username" style="width: 25px;" type="text">
    </li>
  </ul>
  <div class="chosen-drop">
    <!-- ... -->
  </div>
</div>

您可以通过运行问题中的代码片段然后使用浏览器的开发工具来找出答案。

同样，在开发工具中，您可以尝试找出实际呈现列表的组件，并尝试使用 CSS 属性使其表现得如您所愿。

您会发现呈现了您想要设置样式的列表，因此以下 CSS 应该可以工作:

.chosen-choices {
    height: 80px;
    overflow-y: auto;
}

应该这样做。在编写实际的 CSS 文件之前，您可以使用浏览器的开发人员工具来处理这些值。