首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >问答首页 >如何向select2 drop元素添加特定的类?

如何向select2 drop元素添加特定的类?
EN

Stack Overflow用户
提问于 2015-11-13 12:13:11
回答 7查看 49.5K关注 0票数 28

我通过css定制了select2和它的一般类和I。

现在,我正在尝试自定义一个将提供给select2的特定类,然后在css中应用到它。

我的问题是:不是select per说,而是它的下降(类select2- drop 的div )被追加到主体,我如何访问这个对象?

我已经试过了

代码语言:javascript
复制
$(".element").select2({
   minimumResultsForSearch: -1,
   containerCssClass : "error"
  }
);

但是类error不是继承给那个div的。

更新:这是我所说的图形元素(选项区):

这是被检查的代码,我想在其中添加特定的类,所以我可以在CSS中使用它:

更新:小提琴

EN

回答 7

Stack Overflow用户

回答已采纳

发布于 2015-11-13 14:08:52

您可以使用dropdownCssClassselect2-drop添加类。我阅读了整个插件来了解正在发生的事情。最后,我找到了这个选择。

代码语言:javascript
复制
 $(".jSelectbox").select2({
     containerCssClass: "error",
     dropdownCssClass: "test"
 });

Update:如果它不起作用,尝试以下操作(方法2):

代码语言:javascript
复制
$select = $(".jSelectbox").select2({});
$select.data('select2').$container.addClass('error');
$select.data('select2').$dropdown.addClass('test');

代码语言:javascript
复制
$(".jSelectbox").select2({
  containerCssClass: "error",
  dropdownCssClass: "test"
});
代码语言:javascript
复制
<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>

小提琴手

票数 50
EN

Stack Overflow用户

发布于 2017-03-02 14:09:39

如果您包含了containerCssClass,那么select2.full.js就能工作。完整版本有此选项。

票数 6
EN

Stack Overflow用户

发布于 2017-07-10 07:22:33

它有可能以另一种方式-通过数据-*的select2 -(如果不想添加select2.full.js)。如其所用:

代码语言:javascript
复制
 var select2 = $(".element").select2({/* Select2 Opts */});

好的。现在将var select2推到控制台(用于理解),如:

代码语言:javascript
复制
 console.log($(select2).data('select2'));

你会看到这样的东西:

代码语言:javascript
复制
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)
 ....

好的,现在只需将指定的类(-es)以相同的方式添加到select2's dropdown中:

代码语言:javascript
复制
select2.data('select2').$dropdown.addClass("...");

此外,通过$(select2).data('select2'),您可以访问其他select2元素(容器等)。

票数 4
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/33692520

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档