首页 \ 问答 \ 根据Select2 4.0中的值应用css类(Applying css class according to value in Select2 4.0)

根据Select2 4.0中的值应用css类(Applying css class according to value in Select2 4.0)

我有一个select2选择,我想根据值更改背景颜色。

但是,允许我这样做的选项( formatSelectionCssClass )似乎已经从select2的V4.0中删除了

我已尝试使用templateResult与下面的内容:

templateResult: function (item) {
            if (item.loading)
                return item.text;

            var element = $("#" + item._resultId);

            switch (item.text) {
                case "0":
                    element.addClass("element-0");
                    break;
                case "1":
                    element.addClass("element-1");
                    break;
                case "2":
                    element.addClass("element-2");
                    break;
                case "3":
                    element.addClass("element-3");
                    break;
            }

            return item.text;
        },

编辑:JSFiddle: https ://jsfiddle.net/ubswjv95/


I have a select2 select in which I want to change the background color according to the value.

However, the option which would have allowed me to do it (formatSelectionCssClass) seem to have been removed from the V4.0 of select2

I have tried using the templateResult with the folowing :

templateResult: function (item) {
            if (item.loading)
                return item.text;

            var element = $("#" + item._resultId);

            switch (item.text) {
                case "0":
                    element.addClass("element-0");
                    break;
                case "1":
                    element.addClass("element-1");
                    break;
                case "2":
                    element.addClass("element-2");
                    break;
                case "3":
                    element.addClass("element-3");
                    break;
            }

            return item.text;
        },

Edit : JSFiddle : https://jsfiddle.net/ubswjv95/


原文:https://stackoverflow.com/questions/33166190
更新时间:2020-10-25 19:10

最满意答案

您无法通过选择器找到元素,因为在您尝试获取var element = $("#" + item._resultId); 下拉列表中未添加项目。 我已经更新了你的小提琴,而不是只返回项目返回div文本与你的类,似乎很好https://jsfiddle.net/ubswjv95/2/ 。 这个解决方案需要很少的调整,但这是你应该采取的方式。


You can't find element by your selector because in moment when you trying to get var element = $("#" + item._resultId); items aren't added in dropdown. I have made update of your fiddle where I instead of returning just text of item returns div with your classes, and seems fine https://jsfiddle.net/ubswjv95/2/. This solution need little tuneup but this is the way you should go.

2015-10-16

相关问答

更多

如何在新版本4.0中为select2元素添加类?(How to add class to select2 element in new version 4.0?)

在Select2 4.0中,您可以使用selectionAdapter来完成 。 就像是: $.fn.select2.amd.require([ 'select2/utils', 'select2/dropdown', 'select2/dropdown/attachBody', 'select2/selection/single', 'select2/compat/containerCss', ], function (Utils, DropdownAda ...

如何将数据传递给select2版本> 4.0(How to pass data to select2 version > 4.0)

您可以使用data选项将数组传递给select2 : $("#e10_2").select2({ data: names }); 如果您没有text属性适应您的数组,请检查为此目的The id and text properties are strictly enforced制作的文档部分The id and text properties are strictly enforced ,例如: $(function () { var names = [{"id":"1","name":" ...

添加select2 4.0.0焦点(Add select2 4.0.0 focus)

我找到了解决问题的方法! 我通过添加焦点事件修改了文件Select2.js,但我通过命名事件“focus2”来完成。 这里有一段代码可以帮助你: $(your select).select2("focus2"); 您还可以使用以下链接: https : //drive.google.com/open?id = 0B2ESV1Ec1mMTfkNrOVptTUlBbXdnNkJKckNiQUZ3RmJ6UjdncFRwNUR5ZEJzQm40aXM4c2M&authuser = 0 问候! I hav ...

Select2 CSS类(Select2 CSS Classes)

解决了: 更改尺寸搜索栏输入: .select2-dropdown .select2-search .select2-search__field { width: 50% !important; } 更改禁用样式: .select2-container--disabled .select2-selection--single { cursor: not-allowed !important; } .select2-container--disabled .select ...

如何在标签模式下将焦点设置在Select2 4.0上?(How to set focus on Select2 4.0 in tags mode?)

这个怎么样: element.data('select2').$container.find('.select2-search__field').focus(); 的jsfiddle How about this: element.data('select2').$container.find('.select2-search__field').focus(); JsFiddle

无法选择select2项目(The select2 item cannot selected)

这是一个工作的jsfiddle: http : //jsfiddle.net/tk5446/kvLd6/ 只需添加“id”条目,如下所示: id: function(bond){return {id: bond._id};}, Here is a jsfiddle of it working: http://jsfiddle.net/tk5446/kvLd6/ Just needed to add the "id" entry like so: id: function(bond){return ...

使用select2 4.0无法粘贴以插入多个项目(Can't get paste working with select2 4.0 to insert multiple items)

这是select2 4.0.0的一个已知问题,在此报告: https : //github.com/select2/select2/issues/3458 This is a known issue at select2 4.0.0, reported here: https://github.com/select2/select2/issues/3458

select2 4.0和bootstrap工具提示(select2 4.0 and bootstrap tooltip)

使用bootstrap文档和一些开发工具,我找到了一个解决方案。 需要在select2容器上创建工具提示,因为select2隐藏了原始标记。 重新使用原始title属性,您可以在服务器上呈现它。 $(".select2-container").tooltip({ title: function() { return $(this).prev().attr("title"); }, placement: "auto" }); 工作样本: https : // ...

select2 - 始终下拉而不是下拉(select2 - Always dropdown and not dropup)

这对我有用: $.fn.select2.amd.require([ 'select2/selection/multiple', 'select2/selection/search', 'select2/dropdown', 'select2/dropdown/attachContainer', 'select2/dropdown/closeOnSelect', 'select2/utils' ], function (MultipleSelection, Search, D ...

根据Select2 4.0中的值应用css类(Applying css class according to value in Select2 4.0)

您无法通过选择器找到元素,因为在您尝试获取var element = $("#" + item._resultId); 下拉列表中未添加项目。 我已经更新了你的小提琴,而不是只返回项目返回div文本与你的类,似乎很好https://jsfiddle.net/ubswjv95/2/ 。 这个解决方案需要很少的调整,但这是你应该采取的方式。 You can't find element by your selector because in moment when you trying to get ...

相关文章

更多

最新问答

更多
  • 如何保护Solr只允许SELECT请求给用户并禁止其他任何东西?(How to secure Solr to allow SELECT request to only users and disallow anything else?)
  • XPath表达式无效/错误TFHpple SWIFT 1.2(XPath Expression not working/incorrect TFHpple SWIFT 1.2)
  • css3 3D变换不能平滑地制作动画(css3 3D transform doesn't animate smoothly)
  • 运行时错误'91'和Outlook.Application = <对象变量或没有设置块变量>?(Run-time error '91' & Outlook.Application = Object variable or With block variable not set?)
  • 慢的webservice问题(Slow webservice problem)
  • textview的不正确对齐方式(Improper alignment of a textview)
  • 在第一步“Hello World”中出现Java错误(Cannot run “Hello World” program in Eclipse)
  • 为什么十六进制地址是14个字符?(why the hex address is 14 character?)
  • 如何在Python中的不同类中使用变量?(How to use variable in different classes in Python?)
  • asp:GridView HYPERLINKFIELD - datanavigateurlformatstring中的asp代码(asp:GridView HYPERLINKFIELD - asp code inside datanavigateurlformatstring)
  • 关于adaboost算法(About adaboost algorithm)
  • 在Matlab上内置图像(Built in Images on Matlab)
  • java swing:输入键事件时焦点丢失(java swing: Focus lost on enter key event)
  • C#中的通用约束,T是相同的TSomethingElse,对吧?(Generic constraints in C#, T is the same TSomethingElse, right?)
  • 从mybatis中的光标获取数据(Fetching data from cursor in mybatis)
  • 在运行时从XML构建对象的最佳方法(Best way for building objects out of XMLs at runtime)
  • 在整个窗口中拉伸sf :: Sprite(Stretch sf::Sprite across entire window)
  • Selenium Node API Web驱动程序等待超时处理程序(Selenium Node API web driver wait timeout handler)
  • 函数使用并且是map的一部分(循环依赖?)(Function uses and is part of map (circular dependency?))
  • 是否可以在C ++ 14中使用可选模板参数创建类型元组?(Is possible to make a tuple of types with optional template parameters in C++14?)
  • PHP从窗帘后面打印/ f(PHP prints /f from behind the curtains)
  • JFrame的contentPane的LayoutManager(LayoutManager of JFrame's contentPane)
  • 用于Instagram Feed的图像滚动(Image Roll Overs for Instagram Feed)
  • 如何显示拉伸字体(双倍宽度/高度)?(How to display stretched font (double width/height)?)
  • 文件操作API在fileapi.h和stdio.h中的WP8差异?(WP8 differences between file manipulation APIs in fileapi.h and stdio.h?)
  • 保存失败后Rails没有回滚事务()(Rails not rolling back transaction after failed save())
  • jqgrid中的分页问题与数组数据(Pagination problem in jqgrid with array data)
  • 重定向时,通过其他页面上的URL调用javascript函数(Call javascript function through url on otherpage while Redirecting)
  • 如何使用InvokeCommandAction调用我的方法并传入参数?(How do I go about using InvokeCommandAction to call a method of mine and pass in parameters?)
  • Jquerymobile按钮仅显示页面的第一个外观(Jquerymobile buttons are shown only first apperance of the page)