How To Write Text With Multiple Colors In Option Tag

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 t

Solution 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.

Solution 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:

<divid="yourSelectID"class="select"><divclass="option-selection"data-value="none">none</div><divclass="option-container"><divclass="option"data-value="1"style="color:red;">One</div><divclass="option"data-value="2">Two</div><divclass="option"data-value="Whatever"style="color:blue;">1337</div></div><divclass="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:05px;
}
.option-selection {
   min-height:1px;
   float:left;
    padding:05px;
}
.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(); });


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