Javascript 如何将特定类添加到 select2 drop 元素？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/33692520/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to add a specific class to select2 drop element?
提问by Abude
I have select2 customized via css with its general classes and ids.
我已经通过 css 自定义了 select2 及其通用类和 id。
Now, I'm trying to customize a specific class that will be provided to select2 and then apply in css to it.
现在，我正在尝试自定义一个特定的类，该类将提供给 select2，然后在 css 中应用到它。
My issue: is NOT the select per say but the drop of it ( the div with the class select2-drop) that is appended to the body, how can i access that one?
我的问题：不是每个说的选择，而是附加到正文的它（带有select2-drop类的 div ），我如何访问那个？
I've already tried:
我已经试过了：
$(".element").select2({
minimumResultsForSearch: -1,
containerCssClass : "error"
}
);
but the class erroris not inherited to that div.
但该类error并未继承到该 div。
UPDATE: This is the graphic element i'm talking about ( the options area ):
更新：这是我正在谈论的图形元素（选项区域）：
And this is the code in the inspected where i want to add that specific class, so i can play with it in CSS:
这是检查中我想添加该特定类的代码，因此我可以在 CSS 中使用它：
UPDATE: jsfiddle
更新：jsfiddle
回答by Alex
You can use dropdownCssClassfor adding class to the select2-drop. I read whole plugin to understand what is going on. Finally, I found that option.
您可以dropdownCssClass用于将类添加到select2-drop. 我阅读了整个插件以了解发生了什么。最后，我找到了那个选项。
$(".jSelectbox").select2({
containerCssClass: "error",
dropdownCssClass: "test"
});
$(".jSelectbox").select2({
containerCssClass: "error",
dropdownCssClass: "test"
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/3.5.2/select2.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/3.5.2/select2.js"></script>
<select class="jSelectbox">
<option value="AL">Alabama</option>
<option value="AK">Alaska</option>
<option value="AZ">Arizona</option>
<option value="AR">Arkansas</option>
<option value="CA">California</option>
<option value="CO">Colorado</option>
<option value="CT">Connecticut</option>
<option value="DE">Delaware</option>
<option value="FL">Florida</option>
<option value="GA">Georgia</option>
<option value="HI">Hawaii</option>
<option value="ID">Idaho</option>
<option value="IL">Illinois</option>
<option value="IN">Indiana</option>
<option value="IA">Iowa</option>
<option value="KS">Kansas</option>
<option value="KY">Kentucky</option>
<option value="LA">Louisiana</option>
<option value="ME">Maine</option>
<option value="MD">Maryland</option>
<option value="MA">Massachusetts</option>
<option value="MI">Michigan</option>
<option value="MN">Minnesota</option>
<option value="MS">Mississippi</option>
<option value="MO">Missouri</option>
<option value="MT">Montana</option>
<option value="NE">Nebraska</option>
<option value="NV">Nevada</option>
<option value="NH">New Hampshire</option>
<option value="NJ">New Jersey</option>
<option value="NM">New Mexico</option>
<option value="NY">New York</option>
<option value="NC" selected="">North Carolina</option>
<option value="ND">North Dakota</option>
<option value="OH">Ohio</option>
<option value="OK">Oklahoma</option>
<option value="OR">Oregon</option>
<option value="PA">Pennsylvania</option>
<option value="RI">Rhode Island</option>
<option value="SC">South Carolina</option>
<option value="SD">South Dakota</option>
<option value="TX">Texas</option>
<option value="TN">Tennessee</option>
<option value="UT">Utah</option>
<option value="VT">Vermont</option>
<option value="VA">Virginia</option>
<option value="WA">Washington</option>
<option value="WV">West Virginia</option>
<option value="WI">Wisconsin</option>
<option value="WY">Wyoming</option>
</select>回答by arturmoroz
containerCssClassworks if you include select2.full.js. Full version has this option
containerCssClass如果包含select2.full.js. 完整版有这个选项
回答by voodoo417
It's possible to make it in another way - via data-* of select2- (if don't want to add select2.full.js). Use like it:
可以通过另一种方式实现它 - 通过 data-* of select2- （如果不想添加select2.full.js）。像这样使用：
var select2 = $(".element").select2({/* Select2 Opts */});
Ok. Now push var select2to console ( for understanding) like:
好的。现在将 var 推select2送到控制台（以供理解），例如：
console.log($(select2).data('select2'));
You will see something like this:
你会看到这样的事情：
e {$element: init(1), id: "select2-....", options: e, listeners: Object, dataAdapter: d…}
$container: init(1)
$dropdown: init(1) <-- what you need!
$element: init(1)
$results: init(1)
....
Ok, now just add specified class(-es) to select2's dropdownin the same way:
好的，现在只需以select2's dropdown相同的方式添加指定的类（-es）：
select2.data('select2').$dropdown.addClass("...");
Also, via $(select2).data('select2')you have access to others select2 elements (container, etc.).
此外，通过$(select2).data('select2')您可以访问其他 select2 元素（容器等）。
回答by Jennifer Michelle
It will depend on the version of select2 that you are using. The html structure changed in one of the versions.
这将取决于您使用的 select2 版本。html 结构在其中一个版本中发生了变化。
Here is Fiddle example: https://jsfiddle.net/LpjcqbLu/
这是小提琴示例：https: //jsfiddle.net/LpjcqbLu/
I just put the 'error' class on the select box.
我只是将“错误”类放在选择框上。
.error + .select2-container,
.error + .select2-container + .select2-container .select2-dropdown {
border: 3px solid red !important;
}
In earlier versions, the dropdown was not close to the select box (in the dom), so you would have to do a javascript solution to apply the error class directly.
在早期版本中，下拉列表并不靠近选择框（在 dom 中），因此您必须执行 javascript 解决方案来直接应用错误类。
