Question

我在表单中有一个下拉列表（ 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>

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

Answer 1

与@Bojangles评论一样，将div或span等标记放入option是无效的HTML。

但是，您可以使用this之类的内容（请参阅showSubtext示例）来实现您的目标。

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

如何在选项标签中写入多种颜色的文本

2 个答案: