При стилизации и через javascript выпадающие списки работают не правильно

Автор вопроса: Анна Матвеева

Редактирую css у <select> и <option> при помощи javascript кода. Когда два <select> находятся рядом, работает не правильно (вторая ссылка открывает первый select). Это можно исправить?

function tamingselect()
{
    if(!document.getElementById && !document.createTextNode){return;}
    
// Classes for the link and the visible dropdown
    var ts_selectclass='turnintodropdown';  // class to identify selects
    var ts_listclass='turnintoselect';      // class to identify ULs
    var ts_boxclass='dropcontainer';        // parent element
    var ts_triggeron='activetrigger';       // class for the active trigger link
    var ts_triggeroff='trigger';            // class for the inactive trigger link
    var ts_dropdownclosed='dropdownhidden'; // closed dropdown
    var ts_dropdownopen='dropdownvisible';  // 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');
                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 {
    position:relative;
    font-size: 16px;
    color: #777;
    } 

.trigger {
    color: #777;
    padding: 10px;
    font-size: 16px;
    width: 50%;
    background: #fff url(../images/select-arrow-open.png) 98% center no-repeat;
    display: block;
    border: 1px solid #ccc;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -o-transition: all 0.5s ease; 
    transition: all 0.5s ease;
    }

.trigger:hover {
    color: #777;
    background: #f5f5f5 url(../images/select-arrow-open.png) 98% center no-repeat;
    }

.activetrigger {
    color: #777;
    padding: 10px;
    font-size: 16px;
    width: 50%;
    background: #f5f5f5 url(../images/select-arrow-close.png) 98% center no-repeat;
    display: block;
    border: 1px solid #ccc;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    }

.activetrigger:hover {
    background: #f5f5f5 url(../images/select-arrow-close.png) 98% center no-repeat;
    color: #777;
    }

.activetrigger:active {
    background: #f5f5f5 url(../images/select-arrow-close.png) 98% center no-repeat;
    color: #777;
    }

.dropcontainer ul {
position:absolute;
    font-size: 16px;
    border: 1px solid #ccc;
    border-top: none;
    background: #fff;
    list-style-type: none;
    padding: 10px;
    margin: 0;
    width: 50%;
    z-index: 100;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    }

.dropcontainer ul li {
    padding: 5px;
    -webkit-transition: all 0.5s ease; 
    -moz-transition: all 0.5s ease; 
    -o-transition: all 0.5s ease; 
    transition: all 0.5s ease;
    }

.dropcontainer ul li:hover {
    background: #f5f5f5;
    outline: none;
    }

.dropcontainer ul li:first-child {
    display: none;
    }

.dropcontainer ul li:last-child {
    border-bottom: none;
    }

.dropdownhidden {
    display: none;
    }

.dropdownvisible {
    height: auto;
    }

        <select class="turnintodropdown">
            <option>Please select a country:</option>
                <option>England</option>
                <option>Northern Ireland</option>
                <option>Scotland</option>
                <option>Wales</option>
        </select>
    Text text Text text Text text Text text Text text Text text Text text Text text Text text Text text Text text Text text Text text Text text Text text Text text Text text Text text Text text Text text Text text Text text Text text Text text Text text Text text Text text Text text Text text Text text Text text Text text Text text Text text Text text Text text Text text Text text Text text Text text Text text Text text Text text Text text Text text Text text Text text  Text text Text text Text text Text text Text text Text text Text text Text text Text text Text text Text text 
    <select class="turnintodropdown">
            <option>Please select a country:</option>
                <option>England</option>
                <option>Northern Ireland</option>
                <option>Scotland</option>
                <option>Wales</option>
        </select>

Источник

Ответы (2 шт):

Автор решения: Aziz Umarov

Думаю ошибка где-то рядом с этим

ts_swapclass(this.parentNode.getElementsByTagName('ul')[0],ts_dropdownclosed,ts_dropdownopen)

Вы берете всегда первый элемент у parent какой бы он не был в очереди. А исправить нужно взять нужный вам ul, а не 0.

→ Ссылка

Автор решения: noname2019

Если элементы dom останутся в таком же расположении как сейчас, можете изменить this.parentNode.getElementsByTagName('ul')[0] на this.nextElementSibling.firstElementChild Пример:

function tamingselect()
{
    if(!document.getElementById && !document.createTextNode){return;}
    
// Classes for the link and the visible dropdown
    var ts_selectclass='turnintodropdown';  // class to identify selects
    var ts_listclass='turnintoselect';      // class to identify ULs
    var ts_boxclass='dropcontainer';        // parent element
    var ts_triggeron='activetrigger';       // class for the active trigger link
    var ts_triggeroff='trigger';            // class for the inactive trigger link
    var ts_dropdownclosed='dropdownhidden'; // closed dropdown
    var ts_dropdownopen='dropdownvisible';  // 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(){
                [].forEach.call(this.parentElement.querySelectorAll("ul"),function(node){
                 node.className = ts_dropdownclosed;
                 node.parentElement.previousElementSibling.className = ts_triggeroff;
                });
                ts_swapclass(this,ts_triggeroff,ts_triggeron)
                ts_swapclass(this.nextElementSibling.firstElementChild,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');
                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 {
    position:relative;
    font-size: 16px;
    color: #777;
    } 

.trigger {
    color: #777;
    padding: 10px;
    font-size: 16px;
    width: 50%;
    background: #fff url(../images/select-arrow-open.png) 98% center no-repeat;
    display: block;
    border: 1px solid #ccc;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -o-transition: all 0.5s ease; 
    transition: all 0.5s ease;
    }

.trigger:hover {
    color: #777;
    background: #f5f5f5 url(../images/select-arrow-open.png) 98% center no-repeat;
    }

.activetrigger {
    color: #777;
    padding: 10px;
    font-size: 16px;
    width: 50%;
    background: #f5f5f5 url(../images/select-arrow-close.png) 98% center no-repeat;
    display: block;
    border: 1px solid #ccc;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    }

.activetrigger:hover {
    background: #f5f5f5 url(../images/select-arrow-close.png) 98% center no-repeat;
    color: #777;
    }

.activetrigger:active {
    background: #f5f5f5 url(../images/select-arrow-close.png) 98% center no-repeat;
    color: #777;
    }

.dropcontainer ul {
position:absolute;
    font-size: 16px;
    border: 1px solid #ccc;
    border-top: none;
    background: #fff;
    list-style-type: none;
    padding: 10px;
    margin: 0;
    width: 50%;
    z-index: 100;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    }

.dropcontainer ul li {
    padding: 5px;
    -webkit-transition: all 0.5s ease; 
    -moz-transition: all 0.5s ease; 
    -o-transition: all 0.5s ease; 
    transition: all 0.5s ease;
    }

.dropcontainer ul li:hover {
    background: #f5f5f5;
    outline: none;
    }

.dropcontainer ul li:first-child {
    display: none;
    }

.dropcontainer ul li:last-child {
    border-bottom: none;
    }

.dropdownhidden {
    display: none;
    }

.dropdownvisible {
    height: auto;
    }

<select class="turnintodropdown">
            <option>Please select a country:</option>
                <option>England</option>
                <option>Northern Ireland</option>
                <option>Scotland</option>
                <option>Wales</option>
        </select>
    Text text Text text Text text Text text Text text Text text Text text Text text Text text Text text Text text Text text Text text Text text Text text Text text Text text Text text Text text Text text Text text Text text Text text Text text Text text Text text Text text Text text Text text Text text Text text Text text Text text Text text Text text Text text Text text Text text Text text Text text Text text Text text Text text Text text Text text Text text Text text  Text text Text text Text text Text text Text text Text text Text text Text text Text text Text text Text text 
    <select class="turnintodropdown">
            <option>Please select a country:</option>
                <option>England</option>
                <option>Northern Ireland</option>
                <option>Scotland</option>
                <option>Wales</option>
        </select>

→ Ссылка

licensed under cc by-sa 3.0 with attribution.