如何在选项标签中写入多种颜色的文本 [英] how to write text with multiple colors in option tag

问题描述

我在表单中有一个下拉列表（ SELECT标记）。其内容是城市标题。但是我想在他们身边也展示他们的国家头衔。是否可以在< option>< / option> 标签之间使用多种颜色书写文字？

I have a drop down list in a form (SELECT tag). Its contents are city titles. But I would like to show their country titles as a comment beside them too. Is it possible to write texts between <option></option> tags with multiple colors?

示例代码：

Sample code:

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

想象一下，我希望城市标题为黑色和（country_name） 灰色。

Imagine that I would like city titles to be black and (country_name) to be gray.

推荐答案

我刚刚在 jsfiddle ，如果你喜欢，你可以拍摄。我认为这是一个不使用本地浏览器小部件的精选小部件。

I have just wrapped up some code in a jsfiddle, you can give a shoot if you like. I think it's a nice scratch for a select widget without using a native browser widget.

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 ：

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 ：

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

这篇关于如何在选项标签中写入多种颜色的文本的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！