how to write text with multiple colors in option t

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>

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

回答1:

Like @Bojangles commented, it is not valid HTML to put tags like div or span into an option.

However, you can use something like this (see the showSubtext example) to achieve what your are looking for.

回答2:

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:

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