如何动态地将类添加到 Selectize 选项？答案

【问题标题】：How do I add a class to a Selectize option, dynamically?如何动态地将类添加到 Selectize 选项？
【发布时间】：2017-01-01 13:03:27
【问题描述】：

当向select 输入添加选项时，使用 jQuery 有条件地添加一个类很简单：

$("#mySelect").append(
    $("<option></option>") 
        .text(myName)
        .val(myValue)
        .addClass(myBoolean ? "class1" : "class2")
);

我的问题是：如何使用 selectize.js 达到同样的效果？

我可以使用下面的代码添加一个选项（变量mySelect 指代类似$("#mySelect")[0].selectize）。

mySelect.addOption({
    value: productGrouping.id,
    text:  productGrouping.name
});

在此处添加 class 选项不起作用，addOption() 不会返回任何内容，所以我不知道如何执行此操作。有可能吗？

【问题讨论】：

你实例化了选择插件吗？比如：var $select = $('#mySelect').selectize(options);
我确实有，是的。下拉菜单显示得很好......我只想能够向选项添加一个类。干杯。

标签： jquery css selectize.js

【解决方案1】：

这是SelectizeJS Plugin 的绝佳案例。

我写了一个我认为您想要的简单示例 - 标记为“favorite: true”属性的选项有一个新的类和样式，在 SelectizeJS 小部件中动态添加到它们。

selectize.plugins.js

Selectize.define('favorite_options', function(options) {
  options = $.extend({
        className : 'favorited'
    }, options);

  var favoriteOptionsClass = function(thisRef, options) {

    var self = thisRef;
    console.log({'self':self})

    var original = self.setup;
    self.setup = (function() {

        return function() {

          var option_render = self.settings.render.option;
          self.settings.render.option = function(option) {
            // "render" the original option to get the current HTML
            var html = option_render.apply(self, arguments);

            // modify HTML to add class
            var $html = $(html);
            var classes = $html.attr("class");

            if (option.favorite) {
              $html.addClass("favorite")
            }

            // return NEW $html element as HTML string
            return $('<div>').append($html.clone()).html();
          }

          original.apply(self, arguments);
        };
    })();
  }

  favoriteOptionsClass(this, options);
  return;
});

app.js

$("#wiki-select-property").selectize({
  maxItems: 1,
    valueField: 'id',
    labelField: 'title',
    searchField: 'title',
    plugins: [
      'favorite_options' 
    ],
    options: [
        {id: 1, title: 'Spectrometer', favorite: true, url: 'http://en.wikipedia.org/wiki/Spectrometers'},
        {id: 2, title: 'Star Chart', favorite: false,  url: 'http://en.wikipedia.org/wiki/Star_chart'},
        {id: 3, title: 'Electrical Tape', favorite: false,  url: 'http://en.wikipedia.org/wiki/Electrical_tape'}
    ]
})

Working Plnkr Example

【讨论】：