0

Подскажите пожалуйста как обернуть слово "Мало" в 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>

1
  • Вам браузер этот тег вырежет. Придется реализовывать самописный select
    – SwaD
    8 фев в 16:08

0

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Посмотрите другие вопросы с метками или задайте свой вопрос.