Преобразование содержимого select в background

#javascript #jquery

Итак. Имеем вот такой скрипт превращения выпадающего списка в маркированный.



jQuery.fn.selecttolist = function(options) {
    return this.each(function() {
        var select = $(this);
        select.hide();
        var buttonsHtml = $('
');
        var selectIndex = 0;
        var addOptGroup = function(optGroup) {
            if (optGroup.attr('label')) {
                buttonsHtml.append('' + optGroup.attr('label') + '');
            }
            var ulHtml = $('
');
            optGroup.children('option').each(function() {
                var liHtml = $('
');
                if ($(this).attr('disabled') || select.attr('disabled')) {
                    liHtml.addClass('disabled');
                    liHtml.append('' + $(this).html() + '');
                } else {
                    liHtml.append('' + $(this).html() + '');
                }
                if ((!options || !options.noDefault) && select.attr("selectedIndex")
== selectIndex) {
                    liHtml.children('a, span').addClass('picked');
                }
                ulHtml.append(liHtml);
                selectIndex++;
            });
            buttonsHtml.append(ulHtml);
        }
        var optGroups = select.children('optgroup');
        if (optGroups.length == 0) {
            addOptGroup(select);
        } else {
            optGroups.each(function() {
                addOptGroup($(this));
            });
        }
        select.after(buttonsHtml);
        buttonsHtml.find('a').click(function(e) {
            e.preventDefault();
            buttonsHtml.find('a, span').removeClass('picked');
            $(this).addClass('picked');
            $(select.find('option')[$(this).attr('data-select-index')]).attr('selected',
'selected');
            select.trigger('change');
        });
    });
};

$('select').selecttolist();
$('li:first-child').children().addClass('picked');
body,
ul {
  margin: 0;
  padding: 0;
}
ul {
  display: flex;
  flex-wrap: wrap;
  list-style: none;
}
a {
  display: block;
  color: #333;
  text-decoration: none;
  padding: 10px;
}
div {
  padding: 30px;
}
a:hover,
.picked {
  background: #eee;
}


    Простое значение
    Простое значение 2
    #CC0000
    #336600
    Белый
    Черный
    Красный
    Серый
    Полоска
    Кружок





Вопрос такой. Возможно ли приделать к данному решению проверку содержимого опций
селектора и заполнения фона блоков найденым значением. Пробую 2 варианта.

1-й. Когда проверяется содержимое опции по первому символу и количеству символов.
Например, в таком виде опции: #336600, если первый символ
#, а всего символов 7, то вставляем этот хеш в background ссылки созданного выпадающего
списка.

2-й. Создать файл с заданными значениями вот такого вида:

jQuery.fn.selecttolist.init({
colors: {
'Черный': '#000000',
'Красный': '#FF0000',
'Белый': '#FFFFFF',
'Серый': '#CCCCCC',
'Полоска': 'url(/images/poloska.png) no-repeat center center',
'Кружок': 'url(/images/krug.png) no-repeat center center'
},
hideColorsTitle: true 
});


И при совпадении содержимого опции с заданными значениями из списка, подставлять
это значение в background ссылки созданного маркированного списка.

Что хотелось бы получить:



Буду благодарен за любую помощь ибо сам уже замучился с данной задачей. 
    

Ответы

Ответ 1

jQuery.fn.selecttolist = function(options) {
  return this.each(function() {
    var select = $(this);
    select.hide();
    var buttonsHtml = $('
');
    var selectIndex = 0;
    var addOptGroup = function(optGroup) {
      if (optGroup.attr('label')) {
        buttonsHtml.append('' + optGroup.attr('label') + '');
      }
      var ulHtml = $('
');
      optGroup.children('option').each(function() {
        var liHtml = $('
');
        if ($(this).attr('disabled') || select.attr('disabled')) {
          liHtml.addClass('disabled');
          liHtml.append('' + $(this).html() + '');
        } else {
          var content = $(this).html();
          var style = "";
          if (/#[0-9a-fA-F]{6}/.test(content)) { // is css-color
            style = "background: " + content;
          } else if (content in options.colors) { // is predefined background
            style = "background: " + options.colors[content];
          }
          liHtml.append('' + $(this).html() + '');
        }
        if ((!options || !options.noDefault) && select.attr("selectedIndex") == selectIndex) {
          liHtml.children('a, span').addClass('picked');
        }
        ulHtml.append(liHtml);
        selectIndex++;
      });
      buttonsHtml.append(ulHtml);
    }
    var optGroups = select.children('optgroup');
    if (optGroups.length == 0) {
      addOptGroup(select);
    } else {
      optGroups.each(function() {
        addOptGroup($(this));
      });
    }
    select.after(buttonsHtml);
    buttonsHtml.find('a').click(function(e) {
      e.preventDefault();
      buttonsHtml.find('a, span').removeClass('picked');
      $(this).addClass('picked');
      $(select.find('option')[$(this).attr('data-select-index')]).attr('selected',
'selected');
      select.trigger('change');
    });
  });
};

$('select').selecttolist({
  colors: {
    'Черный': '#000000',
    'Красный': '#FF0000',
    'Белый': '#FFFFFF',
    'Серый': '#CCCCCC',
    'Полоска': 'url(/images/poloska.png) no-repeat center center',
    'Кружок': 'url(/images/krug.png) no-repeat center center'
  },
  hideColorsTitle: true
});
$('li:first-child').children().addClass('picked');
body,
ul {
  margin: 0;
  padding: 0;
}

ul {
  display: flex;
  flex-wrap: wrap;
  list-style: none;
}

a {
  display: block;
  color: #333;
  text-decoration: none;
  padding: 10px;
}

div {
  padding: 30px;
}

a:hover,
.picked {
  background: #eee;
}


    Простое значение
    Простое значение 2
    #CC0000
    #336600
    Белый
    Черный
    Красный
    Серый
    Полоска
    Кружок



Ответ 2

Проверять значение option на наличие HEX. 

/(^#[0-9A-F]{6}$)|(^#[0-9A-F]{3}$)/i.test(str)


https://jsfiddle.net/t98x3urp/

И в случае нахождения цвета менять background:

var val = $(this).html(),
    style = '';
if (/(^#[0-9A-F]{6}$)|(^#[0-9A-F]{3}$)/i.test(val)) {
    style = ' style="background: ' + val + ';"'
}
if ($(this).attr('disabled') || select.attr('disabled')) {
   liHtml.addClass('disabled');
   liHtml.append('' + $(this).html() + '');
} else {
   liHtml.append('' + $(this).html() + '');
}


Полный код - https://jsfiddle.net/bjqxqraq/

Таким же образом можно проверять background-image.

И показывать значение или только стили:
liHtml.append('' + (style !== '' ? $(this).html() : '') + '');