如何在选项标签中编写具有多种颜色的文本答案

【问题标题】：how to write text with multiple colors in option tag如何在选项标签中编写具有多种颜色的文本
【发布时间】：2014-12-16 19:33:47
【问题描述】：

我在表单中有一个下拉列表（SELECT 标记）。它的内容是城市名称。但我也想在他们旁边显示他们的国家头衔作为评论。是否可以在<option></option> 标签之间用多种颜色编写文本？

示例代码：

<select name="cities">
    <option value="1">London (England)</option>
    <option value="2">Sidney (Australia)</option>
    <option value="3">Amsterdam (Netherlands)</option>
</select>

假设我希望城市名称为黑色，（国家名称）为灰色。

【问题讨论】：

你不能，至少不能用原生<select>。有 jQuery 插件和 JavaScript 模块可以满足你的需求，但是
@Bojangles，谢谢你的回答。
如果您正在寻找纯 CSS 解决方案，它目前仅适用于 IE。您可以一次为一个选项标签着色，而不是使用不同颜色的部分标签。回答您的问题时，您应该使用 div 或其他方式产生与 select 列表类似的行为。
Styling part of the OPTION text 的可能重复项

标签： html css html-select textcolor

【解决方案1】：

就像@Bojangles 评论的那样，将div 或span 等标签放入option 是无效的HTML。

但是，您可以使用 this 之类的东西（参见 showSubtext 示例）来实现您正在寻找的东西。

【讨论】：

它没有我想要的，但它是一个很棒的链接，因为它有有趣的样本......谢谢。
在此页面上搜索“showSubtext”。这不正是您要寻找的吗？

【解决方案2】：

我刚刚在jsfiddle 中封装了一些代码，如果你愿意，可以拍下。我认为在不使用本机浏览器小部件的情况下选择小部件是一个不错的选择。

HTML：

<div id="yourSelectID" class="select">
    <div class="option-selection" data-value="none">none</div>
    <div class="option-container">
        <div class="option" data-value="1" style="color:red;">One</div>
        <div class="option" data-value="2">Two</div>
        <div class="option" data-value="Whatever" style="color:blue;">1337</div>
    </div>
    <div class="option-expand">+</div>
</div>

<button>Show Selection</button>

CSS：

.select {
    border:1px solid #444444;
    height:20px;
    display:inline-block;
    border-radius:3px;
}
.option-container {
    display:none;
    position:absolute;
    top:30px;
    border:1px solid;
}
.option-expand {
    float:left;
    cursor:pointer;
    padding:0 5px;
}
.option-selection {
   min-height:1px;
   float:left;
    padding:0 5px;
}
.option {
    padding:5px;
    background:#FFF;
}

jQuery：

    $('.option-selection').width($('.option-selection').next('.option-container').width()-10); 
    $('.option-expand').click(function(e){
        e.preventDefault();
        $(this).parent().children('.option-container').slideToggle();  
    });

    $('.option').click(function(e){
        e.preventDefault();
        $this = $(this);
        var value = $this.attr('data-value');
        var name  = $this.text();
        $parent = $this.parent().parent().children('.option-selection');
        $parent.html(name);
        $parent.attr('data-value', value);
        $optionContainer = $this.parent();
        $optionContainer.slideToggle(); });


    function getSelection(id){
        $selection = $('#'+id).children('.option-selection');
        var name = $selection.text();
        var value = $selection.attr('data-value');
        return {name: name, value: value}; };

    $('button').click(function(e){
        var result = getSelection('yourSelectID');
        alert('Selection name: '+ result.name +' Selection value: ' + result.value); });

【讨论】：