Is it possible to show selected icon in selected item (In demo - Select with icons) ?

[vijay-vanecha]

Hi,

Thanks for this great plugin. I am really searching for same (Custom HTML Select with icons).

I just need to display selected icon in selected item. Currently it is displaying only text in selected item.

Thanks again.

[rymopl]

hi,

Vijay you need to edit the plugin code.

Edit those two lines 188 and 416

for exaple you can change those lines to something like that:
$label.html(''+_this.items[currValue].text);

hope it will solve your problem

[murtali]

I made the following change where $label.html is

// I added another option called optionsTrigger
...
  optionsTrigger: '{text}',
  optionsItemBuilder: '{text}' // function(itemData, element, index)
...
// then added this:
var triggerBuilder = _this.options.optionsTrigger
$label.html($.isFunction(triggerBuilder) ? triggerBuilder(_this.items[currValue].element) : _this.items[currValue].text);

then when you call selectric you can pass in the option which you can provide a function with the element:

$().selectric({
   optionsTrigger: function(element) {
      return '<div>' + element.data('something') + '</div>';
   }
});

[lcdsantos]

Added new option in v1.9.2, using the select with icons from the demo, using the sames classes it would look like this:

$('.customOptions').selectric({
  optionsItemBuilder: function(itemData, element, index) {
    return element.val().length ? '<span class="ico ico-' + element.val() +  '"></span>' + itemData.text : itemData.text;
  },
  labelBuilder: function(currItem) {
    return (currItem.value.length ? '<span class="ico ico-' + currItem.value + '"></span>' : '') + currItem.text;
  }
});