Подскажите пожалуйста как обернуть слово "Мало" в span при реализации select в javascript? Спасибо
function tamingselect() {
if (!document.getElementById && !document.createTextNode) { return; }
// Classes for the link and the visible dropdown
var ts_selectclass = 'turnintodropdown_demo2'; // class to identify selects
var ts_listclass = 'turnintoselect_demo2'; // class to identify ULs
var ts_boxclass = 'dropcontainer_demo2'; // parent element
var ts_triggeron = 'activetrigger_demo2'; // class for the active trigger link
var ts_triggeroff = 'trigger_demo2'; // class for the inactive trigger link
var ts_dropdownclosed = 'dropdownhidden_demo2'; // closed dropdown
var ts_dropdownopen = 'dropdownvisible_demo2'; // open dropdown
/*
Turn all selects into DOM dropdowns
*/
var count = 0;
var toreplace = new Array();
var sels = document.getElementsByTagName('select');
for (var i = 0; i < sels.length; i++) {
if (ts_check(sels[i], ts_selectclass)) {
var hiddenfield = document.createElement('input');
hiddenfield.name = sels[i].name;
hiddenfield.type = 'hidden';
hiddenfield.id = sels[i].id;
hiddenfield.value = sels[i].options[0].value;
sels[i].parentNode.insertBefore(hiddenfield, sels[i])
var trigger = document.createElement('a');
ts_addclass(trigger, ts_triggeroff);
trigger.href = '#';
trigger.onclick = function () {
ts_swapclass(this, ts_triggeroff, ts_triggeron)
ts_swapclass(this.parentNode.getElementsByTagName('ul')[0], ts_dropdownclosed, ts_dropdownopen);
return false;
}
trigger.appendChild(document.createTextNode(sels[i].options[0].text));
sels[i].parentNode.insertBefore(trigger, sels[i]);
var replaceUL = document.createElement('ul');
for (var j = 0; j < sels[i].getElementsByTagName('option').length; j++) {
var newli = document.createElement('li');
var newa = document.createElement('a');
var newspan = document.createElement('span');
newli.v = sels[i].getElementsByTagName('option')[j].value;
newli.elm = hiddenfield;
newli.istrigger = trigger;
newa.href = '#';
newa.appendChild(document.createTextNode(
sels[i].getElementsByTagName('option')[j].text));
newli.onclick = function () {
this.elm.value = this.v;
ts_swapclass(this.istrigger, ts_triggeron, ts_triggeroff);
ts_swapclass(this.parentNode, ts_dropdownopen, ts_dropdownclosed)
this.istrigger.firstChild.nodeValue = this.firstChild.firstChild.nodeValue;
return false;
}
newli.appendChild(newa);
replaceUL.appendChild(newli);
}
ts_addclass(replaceUL, ts_dropdownclosed);
var div = document.createElement('div');
div.appendChild(replaceUL);
ts_addclass(div, ts_boxclass);
sels[i].parentNode.insertBefore(div, sels[i])
toreplace[count] = sels[i];
count++;
}
}
/*
Turn all ULs with the class defined above into dropdown navigations
*/
var uls = document.getElementsByTagName('ul');
for (var i = 0; i < uls.length; i++) {
if (ts_check(uls[i], ts_listclass)) {
var newform = document.createElement('form');
var newselect = document.createElement('select');
for (j = 0; j < uls[i].getElementsByTagName('a').length; j++) {
var newopt = document.createElement('option');
newopt.value = uls[i].getElementsByTagName('a')[j].href;
newopt.appendChild(document.createTextNode(uls[i].getElementsByTagName('a')[j].innerHTML));
newselect.appendChild(newopt);
}
newselect.onchange = function () {
window.location = this.options[this.selectedIndex].value;
}
newform.appendChild(newselect);
uls[i].parentNode.insertBefore(newform, uls[i]);
toreplace[count] = uls[i];
count++;
}
}
for (i = 0; i < count; i++) {
toreplace[i].parentNode.removeChild(toreplace[i]);
}
function ts_check(o, c) {
return new RegExp('\\b' + c + '\\b').test(o.className);
}
function ts_swapclass(o, c1, c2) {
var cn = o.className
o.className = !ts_check(o, c1) ? cn.replace(c2, c1) : cn.replace(c1, c2);
}
function ts_addclass(o, c) {
if (!ts_check(o, c)) { o.className += o.className == '' ? c : ' ' + c; }
}
}
window.onload = function () {
tamingselect();
// add more functions if necessary
}
.dropcontainer_demo2 {
position: relative;
font-size: 16px;
color: #777;
}
.trigger_demo2 {
padding: 12px 12px 12px 16px;
border: 1px solid #ebe6e1;
cursor: pointer;
width: 100%;
border-radius: 4px;
display: block;
background-color: rgba(168, 149, 131, 0.04);
transition: all 0.5s ease;
}
.trigger_demo2:hover {
color: #777;
}
.activetrigger_demo2 {
padding: 12px 12px 12px 16px;
cursor: pointer;
width: 100%;
border-radius: 4px;
display: block;
background-color: rgba(168, 149, 131, 0.1);
border: 1px solid #a89583;
transition: all 0.5s ease;
}
.activetrigger_demo2:hover {
color: #777;
}
.activetrigger_demo2:active {
color: #777;
}
.dropcontainer_demo2 ul {
z-index: 100;
position: absolute;
top: 8px;
min-width: 100%;
left: 0;
max-height: 400px;
background-color: #fff;
border-radius: 4px;
box-shadow: 0 2px 8px rgb(31 27 22 / 8%);
padding: 8px;
}
.dropcontainer_demo2 ul li {
padding: 8px 40px 8px 8px;
}
.dropcontainer_demo2 ul li a span {
margin-left: 16px;
font-size: 14px;
line-height: math.div(20, 14);
color: rgba(129, 109, 94, 0.6);
}
.dropcontainer_demo2 ul li:first-child {
display: none;
}
.dropdownhidden_demo2 {
display: none;
}
.dropdownvisible_demo2 {
height: auto;
}
.dropdownvisible_demo2 {
max-height: 400px;
overflow-y: scroll;
}
<select class="turnintodropdown_demo2">
<option>Выберите размер</option>
<option>S <span>Мало</span></option>
<option>M <span>Мало</span></option>
<option>L</option>
<option>XL</option>
<option>XXL <span>Мало</span></option>
</select>