如何将唯一 ID 添加到 select2 下拉列表

Posted

技术标签:

【中文标题】如何将唯一 ID 添加到 select2 下拉列表【英文标题】:How to add unique ID to select2 dropdown 【发布时间】:2017-07-04 08:41:16 【问题描述】:

我遇到了一个问题,我在页面上有多个选择,而我们正在使用 select2。我只想为这个特定的选择设置样式,但我无法使其独一无二,因此我可以添加一些 CSS。我可以将 ID 添加到容器中,但实际发生的是当打开下拉菜单时,代码被添加到正文的最底部,因此我无法使用 ID 或 css 来定位它而不应用它到每一个选择。

如何将 id 或 class 添加到下面的代码中?我正在使用 select2 v3.4.0。 如果您在此页面上打开一个选择,您可以看到我指的是什么。 SELECT 2

<div class="select2-drop select2-display-none select2-drop-active select2-with-searchbox" style="display: block; top: 468px; left: 627.078px; width: 252px;" id="select2-drop">
    <div class="select2-search">
        <input type="text" autocomplete="off" autocorrect="off" autocapitilize="off" spellcheck="false" class="select2-input"> </div>
    <ul class="select2-results">
        <li class="select2-results-dept-0 select2-result select2-result-selectable select2-highlighted">
            <div class="select2-result-label"><span class="select2-match"></span>Standard Vehicle</div>
        </li>
        <li class="select2-results-dept-0 select2-result select2-result-unselectable select2-disabled">
            <div class="select2-result-label"><span class="select2-match"></span></div>
        </li>
        <li class="select2-results-dept-0 select2-result select2-result-selectable">
            <div class="select2-result-label"><span class="select2-match"></span>Motorcycles &amp; Scooters</div>
        </li>
    </ul>
</div>

【问题讨论】:

so I am unable to target it with an ID or css without applying it to every single select. 为什么? DOM 应该可以在底部正常访问。 @ZakariaAcharki,在您单击选择打开之前,该代码块不会被添加到 DOM。 @DaveOz 当我在实际选择的 html 中添加类时,它不会延续到 html 的底部。 是的,我知道.. 问题出在哪里?您只需使用正确的class/id 定位元素。请向我们展示一个重现您的问题的示例。 @ZakariaAcharki 这是一个例子。 codepen.io/johnsonjpj/pen/EZMRKG 例如,如果我想在那个 中设置一些样式,如果它不是唯一的,我该怎么办?我将在页面上进行其他选择,我添加的任何 css 都将适用于所有。 【参考方案1】:

Updated codepin.

从Documentation - Constructor parameters part,您可以使用dropdownCssClass 参数为您想要的选择列表提供特定的自定义class

$("#my-id").select2(
    dropdownCssClass: "custom-dropdown"
);

希望这会有所帮助。

【讨论】:

以上是关于如何将唯一 ID 添加到 select2 下拉列表的主要内容,如果未能解决你的问题,请参考以下文章

将按钮添加到 Select2 下拉列表

如何将模型数据加载到在 Yii 中使用 Ajax 过滤的 Select2 下拉列表

如何从下拉列表中显示确切的值?

如何使用 select2 插件隐藏下拉列表中的选项?

如何在select2下拉列表中换行?

如何以编程方式在 select2 多选下拉列表中添加其他选择而不会丢失现有的选定项目