Css линейный градиент внутри тега option в раскрывающемся меню

Я хотел бы иметь раскрывающееся меню с цветной полосой внутри опции для их выбора. Это мой код на данный момент

http://jsfiddle.net/xpvt214o/895130/

html:

<div id = "legendtest" style = "width:50%;margin-left:50px">
<div id = "legendGradient"><span style = "opacity:0;">.</span></div></div>
<div style = "display: inline">
<form action = "#">
<label>Farbskala: <span id = "Colormenuspan">test lala</span>
<br/>
<select id = "Colormenu"></select>
</label>
</form>
</div>

js:

var first = [
'rgb(43,131,186)',
'rgb(131,193,171)',
'rgb(215,239,178)',
'rgb(252,169,94)',
'rgb(215,25,28)'
];

var second =
["rgb(255,247,251)",
"rgb(236,231,242)",
"rgb(208,209,230)",
"rgb(166,189,219)",
"rgb(116,169,207)",
"rgb(54,144,192)",
"rgb(5,112,176)",
"rgb(4,90,141)",
"rgb(2,56,88)"];

AllColorRampsName = [ "first","second"]

DrawLegend = function(gradient) {


var gradientCss = '(left';
for (var i = 0; i < gradient.length; ++i) {
gradientCss += ', ' + gradient[i];
}
gradientCss += ')';

$('#legendGradient').css('background', '-webkit-linear-gradient' + gradientCss);
$('#legendGradient').css('background', '-moz-linear-gradient' + gradientCss);
$('#legendGradient').css('background', '-o-linear-gradient' + gradientCss);
$('#legendGradient').css('background', 'linear-gradient' + gradientCss);


 }

function CreateFarbskaladropdown(AllColorRampsName){
 $.each(AllColorRampsName, function(j, item) {
   $("#Colormenu").append('<option data-' + item + '-ival = "' + j + '" value = "' + item + '"> <div id = "dm' + item + '">.</div></option>');

var gradientCss = '(left';
 for (var i = 0; i < eval(item).length; ++i) {
  gradientCss += ', ' + eval(item)[i];
  }
  gradientCss += ')';

  $('#dm' + item).css('background', '-webkit-linear-gradient' + gradientCss);
  $('#dm' + item).css('background', '-moz-linear-gradient' + gradientCss);
  $('#dm' + item).css('background', '-o-linear-gradient' + gradientCss);
  $('#dm' + item).css('background', 'linear-gradient' + gradientCss);
});
}

DrawLegend(first)
DrawLegend(second)
CreateFarbskaladropdown(AllColorRampsName)

Я пытаюсь поместить тот же div, который я создаю, чтобы показать цветовую панель легенды в html, чтобы она отображалась внутри раскрывающегося меню, чтобы я мог выбрать, какую из цветных полос использовать. Можно ли вообще создать div внутри раскрывающегося меню?