主页 / 问题 / 629352
Accepted
Alexey Giryayev
Asked:2020-02-18 03:01:41 +0000 UTC2020-02-18 03:01:41 +0000 UTC

将选择的内容转换为背景

  • 772

所以。我们有这样一个脚本，用于将下拉列表转换为标记列表。

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>

问题是。是否可以将选择器选项内容的检查附加到此解决方案，并用找到的值填充块的背景。我正在尝试 2 个选项。

1日。当根据第一个字符和字符数检查选项的内容时。例如，在这种形式的 option:<option value="1">#336600</option>中，如果第一个字符是#，并且字符总数是 7，那么我们将这个 hash 插入到background创建的下拉列表的链接中。

第二。创建一个具有给定值的文件，如下所示：

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创建的项目符号列表的链接中。

您希望收到什么：

在此处输入图像描述

如果有任何帮助，我将不胜感激，因为我自己已经被这项任务折磨得够呛。

javascript

2 个回答

  1. Best Answer

    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>

    • 3

  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('<span' + style + '>' + $(this).html() + '</span>');
} else {
   liHtml.append('<a href="javascript://" data-select-index="' + selectIndex + '"' + style + '>' + $(this).html() + '</a>');
}

    完整代码 - https://jsfiddle.net/bjqxqraq/

    你可以用同样的方式检查background-image。

    并显示值或仅显示样式： liHtml.append('<a href="javascript://" data-select-index="' + selectIndex + '"' + style + '>' + (style !== '' ? $(this).html() : '') + '</a>');

    • 3

相关问题