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

2023年12月12日 169次阅读

有一个新的要求,我们需要为单个选择列表项具有不同的颜色,即在选项行上需要有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>

例如,对于第一个选择选项,我希望在同一列表项中看到红色的文本“红色”和蓝色的“蓝色”.

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

非常感谢

最佳答案 在我看来和你的代码实验中,可能无法直接(
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菜单组件的外部源代码)

希望能帮助到你.

点赞