Convert content select to background

Question

So. We have this script for turning the drop-down list into a bulleted one.

jQuery.fn.selecttolist = function(options) { return this.each(function() { var select = $(this); select.hide(); var buttonsHtml = $('<div class="options-cont"></div>'); var selectIndex = 0; var addOptGroup = function(optGroup) { if (optGroup.attr('label')) { buttonsHtml.append('<strong>' + optGroup.attr('label') + '</strong>'); } var ulHtml = $('<ul class="select-buttons">'); optGroup.children('option').each(function() { var liHtml = $('<li></li>'); if ($(this).attr('disabled') || select.attr('disabled')) { liHtml.addClass('disabled'); liHtml.append('<span>' + $(this).html() + '</span>'); } else { liHtml.append('<a href="javascript://" data-select-index="' + selectIndex + '">' + $(this).html() + '</a>'); } 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; }

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <select class="shop-options-s " id="id-oval" onchange="changeOptions('/shop/desc/krasula', 'id', '36', this)"> <option value="0">Простое значение</option> <option value="1">Простое значение 2</option> <option value="2">#CC0000</option> <option value="3">#336600</option> <option value="4">Белый</option> <option value="5">Черный</option> <option value="6">Красный</option> <option value="7">Серый</option> <option value="8">Полоска</option> <option value="9">Кружок</option> </select>

The question is this. Is it possible to attach to this solution the check of the contents of the options of the selector and the filling of the background of the blocks with the value found. I try 2 options.

1st. When checking the contents of an option on the first character and number of characters. For example, in this form of the option: <option value="1">#336600</option> , if the first character is # , and all characters are 7 , then we insert this hash into the background link of the created drop-down list.

2nd. Create a file with the following values:

 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 });

And if the contents of the option coincide with the specified values from the list, substitute this value in the background reference of the created bulleted list.

What I would like to receive:

I would be grateful for any help because he himself was already tortured with this task.

Tell me, is it fundamentally what from the select you need to do such a tag bar?
To be honest, I personally did not answer at the time of the creation of this question just because I did not understand what was needed at all.
Maybe you should use a ready-made solution in the form of color picker, most of them have everything you need - both the choice of the palette and the message about the choice of color on which you can put the handler?

br3t br3t 3,659 3 eleven 24 · Accepted Answer · 2017-02-20T11:16:36

 jQuery.fn.selecttolist = function(options) { return this.each(function() { var select = $(this); select.hide(); var buttonsHtml = $('<div class="options-cont"></div>'); var selectIndex = 0; var addOptGroup = function(optGroup) { if (optGroup.attr('label')) { buttonsHtml.append('<strong>' + optGroup.attr('label') + '</strong>'); } var ulHtml = $('<ul class="select-buttons">'); optGroup.children('option').each(function() { var liHtml = $('<li></li>'); if ($(this).attr('disabled') || select.attr('disabled')) { liHtml.addClass('disabled'); liHtml.append('<span>' + $(this).html() + '</span>'); } 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('<a href="javascript://" data-select-index="' + selectIndex + '" style="' + style + '">' + $(this).html() + '</a>'); } 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; }

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <select class="shop-options-s " id="id-oval" onchange="changeOptions('/shop/desc/krasula', 'id', '36', this)"> <option value="0">Простое значение</option> <option value="1">Простое значение 2</option> <option value="2">#CC0000</option> <option value="3">#336600</option> <option value="4">Белый</option> <option value="5">Черный</option> <option value="6">Красный</option> <option value="7">Серый</option> <option value="8">Полоска</option> <option value="9">Кружок</option> </select>

@SashaOmelchenko this error occurs and in my example, is irrelevant.
@ br3t thanks, tomorrow I will carefully review everything and accomplish my goal.
I added a bit of code and everything turned out as I wanted.

Nick nick 158 3 · Answer 2 · 2017-02-22T00:48:24

Check the option value for HEX .

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

https://jsfiddle.net/t98x3urp/

And in case of finding the color, change the 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('<span' + style + '>' + $(this).html() + '</span>'); } else { liHtml.append('<a href="javascript://" data-select-index="' + selectIndex + '"' + style + '>' + $(this).html() + '</a>'); }

The full code is https://jsfiddle.net/bjqxqraq/

In the same way, you can check background-image .

And show the value or just the styles: liHtml.append('<a href="javascript://" data-select-index="' + selectIndex + '"' + style + '>' + (style !== '' ? $(this).html() : '') + '</a>');

I would give you 50 votes, but the first answer was earlier and with a ready-made example.

Convert content select to background

2 answers 2

More articles: