Displaying icons in options list

[belgarion16]

Hi! Thank you first of all for this great work and for sharing it. I'm just getting a hard time trying to add icons to the options. None of these will work :

My Option 1 My Option 2

Is there any way to display icons from font awesome or glyphicons at the left of an option element?

Thank you by advance for your help

All the best

Aurelien

[Kane-R-G]

You need to make a couple of changes but you should be able to use this, I created to it to use bootstrap badges. When you create your select options, you add data-class="ENTER CLASSES HERE"

You then need to change a few things in nice-select.js:

$(document).on('click.nice_select', '.nice-select .option:not(.disabled)', function(event) {
      var $option = $(this);
      var $dropdown = $option.closest('.nice-select');
      $dropdown.find('.selected').removeClass('selected');
      $option.addClass('selected');
      var text = $option.data('display') || $option.html();
      $dropdown.find('.current').html(text);
      $dropdown.prev('select').val($option.data('value')).trigger('change');
});

and also update the create function

function create_nice_select($select) {
      $select.after($('<div></div>')
        .addClass('nice-select')
        .addClass($select.attr('class') || '')
        .addClass($select.attr('disabled') ? 'disabled' : '')
        .attr('tabindex', $select.attr('disabled') ? null : '0')
        .html('<span class="current"></span><ul class="list"></ul>')
      );
        
      var $dropdown = $select.next();
      var $options = $select.find('option');
      var $selected = $select.find('option:selected');
      var selected_class_attr = $selected.attr('data-class');
      var selected_html = $selected.html();
        if (typeof selected_class_attr !== typeof undefined && selected_class_attr !== false) {
          selected_html = '<span class="' + selected_class_attr + '">' + $selected.text() + '</span>';
        }

      $dropdown.find('.current').html($selected.data('display') || selected_html );
      
      $options.each(function(i) {
        var $option = $(this);
        var display = $option.data('display');
        var option_html = $option.text();
        var class_attr = $(this).attr('data-class');
        if (typeof class_attr !== typeof undefined && class_attr !== false) {
            option_html = '<span class="' + class_attr + '">' + $option.text() + '</span>';
        }

        $dropdown.find('ul').append($('<li></li>')
          .attr('data-value', $option.val())
          .attr('data-display', (display || null))
          .addClass('option' +
            ($option.is(':selected') ? ' selected' : '') +
            ($option.is(':disabled') ? ' disabled' : ''))
          .html(option_html)
        );
      });
}

[cruzriga]

yo hice lo mismo pero reconociendo el data-html en la etiqueta del option <option data-html="<i class='fas fa-times'></i> Lista"> Lista</option>

y cambia las funciones

function create_nice_select($select) {
      $select.after($('<div></div>')
        .addClass('nice-select')
        .addClass($select.attr('class') || '')
        .addClass($select.attr('disabled') ? 'disabled' : '')
        .attr('tabindex', $select.attr('disabled') ? null : '0')
        .html('<span class="current"></span><ul class="list"></ul>')
      );
        
      var $dropdown = $select.next();
      var $options = $select.find('option');
      var $selected = $select.find('option:selected');
      
      $dropdown.find('.current').html($selected.data('html') || $selected.text());
      
      $options.each(function(i) {
        var $option = $(this);
        var display = $option.data('display');
        var html = $option.data('html');

        $dropdown.find('ul').append($('<li></li>')
          .attr('data-value', $option.val())
          .attr('data-display', (display || null))
          .addClass('option' +
            ($option.is(':selected') ? ' selected' : '') +
            ($option.is(':disabled') ? ' disabled' : ''))
          .html(html || $option.text())
        );
      });
    }

$(document).on('click.nice_select', '.nice-select .option:not(.disabled)', function(event) {
      var $option = $(this);
      var $dropdown = $option.closest('.nice-select');
      
      $dropdown.find('.selected').removeClass('selected');
      $option.addClass('selected');
      
      var text = $option.data('display') || $option.html();
      $dropdown.find('.current').html(text);
      $dropdown.prev('select').val($option.data('value')).trigger('change');
    });

espero que te sirva