Возможно ли добавить <div> или <span> внутри тега <option>?

как я могу добавить тег <div> или <span> внутри тега <option>?

Я хочу, чтобы строка была <option>, конечно, она имеет значение и все, но мне нужно поместить круг красного цвета рядом с текстом в этой опции, возможно ли это?

код:

<option value="1">text<div style='background:none repeat scroll 0 0 green;height:25px;width:25px;'></div></option>
<option value="2">text<div style='background:none repeat scroll 0 0 green;height:25px;width:25px;'></div></option>
<option value="3">text<div style='background:none repeat scroll 0 0 green;height:25px;width:25px;'></div></option>
<option value="4">text<div style='background:none repeat scroll 0 0 green;height:25px;width:25px;'></div></option>

Ответ 1

После текста можно поместить красный круг - http://jsfiddle.net/V8cvQ/

option:after {
    content: " ";
    height: 5px;
    width: 5px;
    background: #c00;
    border-radius: 5px;
    display: inline-block;
}

...

UPDATE

Чтобы иметь разные цветовые точки

HTML

<select>
    <option> select </option>
    <option class="red"> one </option>
    <option class="green"> two </option>
    <option class="blue"> three </option>
</select>

CSS

option:after {
    content: " ";
    height: 5px;
    width: 5px;
    border-radius: 5px;
    display: inline-block;
}

option.red:after { background: #c00; }
option.green:after { background: #0c0; }
option.blue:after { background: #00c; }

DEMO

Ответ 2

Нет. Согласно MDN, это разрешено:

Допустимое содержимое: текст со скопированными символами (например, é)

Ответ 3

Нет, это невозможно. Или, по крайней мере, недействительно.

Ответ 4

Нет. Для этого вы можете попробовать следующее: Используйте div, чтобы отобразить выбранный элемент и поместить в него div или кнопку, как раскрывающуюся кнопку. Когда кнопка нажата, отображается еще один div, содержащий все ваши параметры.

Немного сложный, поэтому не нужно, чтобы добиться этого эффекта, просто чтобы он выглядел красиво.

Ответ 5

Вы можете заменить свои параметры плагином JS:

HTML:

<h3>multiSelect = false</h3>
<div id="combo1" class="combo"></div><br>
&nbsp;&nbsp;<button id="get1">get1</button>&nbsp;
<button id="set1">set1</button>

JS:

$(function(){
var dd = [];
for(var i=1;i<=4; i++)
    dd.push({ code: i + '', name: 'Employee ' + i });
var cfg = {
    keyField: 'code',
    displayField: 'name',
    multiSelect: false,
    width: 200,
    boxWidth: 200,
    cols : [{
        field: 'code', width: '30%'
    },{
        field: 'name', width: '70%'
    }],
    data: dd
};
var cfg1 = $.extend({}, cfg);
var cb1 = $('#combo1').mac('combo', cfg1);
$('#get1').click(function(){
    alert(cb1.selected);
});
$('#set1').click(function(){
    cb1.select(2);
});

});

Не забудьте скопировать внешние источники из jsfiddle: Вот скрипка

http://jsfiddle.net/arslantabassum/p5s4jzez/

1. copy html
2. copy javascript
3. copy external sources