Question

有一项新要求，我们需要为单个选择列表项目使用不同的颜色，即在选项行上需要有2种不同的颜色。

以下示例html代码：

<select name="test">
  <option value = "red blue"> red blue </option>
  <option style="color:blue;" value = "Row2"> Row2 </option>
  <option style="color:green;" value = "Row3"> Row3 </option>
</select>

例如，对于第一个选择选项，我想看到文字＆＃34; red＆＃34;红色和蓝色＆＃34;在同一个列表项中以蓝色显示。

如果可能，请有人提供完整代码的工作示例

非常感谢

Answer 1

在我看来和对您的代码进行实验时，可能无法直接（failed code）。但是如果你想要解决它/修复它，你可以使用像purecss这样的小型外部库（取其菜单组件）并简单地编写如下代码：

只是一个提出想法的例子。

HTML：

<div class="pure-menu pure-menu-horizontal">
  <ul class="pure-menu-list">
    <li class="pure-menu-item pure-menu-has-children pure-menu-allow-hover">
      <a href="#" id="menuLink1" class="pure-menu-link">select here</a>
      <ul class="pure-menu-children">
        <li class="pure-menu-item"><a href="#" class="pure-menu-link" value="red blue">red blue</a></li>
        <li class="pure-menu-item"><a href="#" class="pure-menu-link" value="blue">Row2</a></li>
        <li class="pure-menu-item"><a href="#" class="pure-menu-link" value="green">Row3</a></li>
      </ul>
    </li>
  </ul>
</div>

Jquery的：

$(".pure-menu-children li").each(function(i, opt){
  var colors = $(opt).find(".pure-menu-link").attr("value"); // get the value
  var txt = $(opt).find(".pure-menu-link").text(); // get the text
  var txtarr = txt.trim().split(" "); // split them
  var colorarr = colors.trim().split(" ");
  $(opt).find(".pure-menu-link").html(""); // clear the content of the option
  var len;
  if(txtarr.length >= colorarr.length){
    len = txtarr.length - colorarr.length;
    while(len--){
      colorarr.push("black");
    }
  }
  len = txtarr.length;
  while(len--){
    $(opt).find(".pure-menu-link").append("&nbsp;<span style='color : "+colorarr.shift()+"'>"+txtarr.shift()+"</span>&nbsp;");
  }  
});

工作代码：https://jsfiddle.net/dkv6q2da/8/（检查purecss菜单组件的外部源）

希望它有所帮助。

Answer 2

您可以非常轻松地将每个选项命名为类，并根据需要将css样式添加到该类。这应该有一个白色背景这应该有RED背景这应该有一个黄色背景这应该有绿色背景

<style type="text/css">
    .white {background:white;}
    .red {color:red;}
    .yellow {color:yellow;}
    .green {color:green}
</style> <!-- The styling you want can be given here -->

HTML选择在同一行或相同选项上具有不同颜色的Option标签

2 个答案: