如何使功能與相同的類一起工作？

Question

我找到了一個很好的劇本。 一切都很好，除了一件事; 當我嘗試插入第二個列表時 - 它不起作用。 當您想要打開第二個塊時，第一個塊繼續。

我試圖添加不同的類，但不幸的是，它對我不起作用。 我哪里錯了？

 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: 13px; color: #777; } .trigger { color: #777; padding: 5px; font-size: 13px; width: 90%; margin: 10px 15px 10px 0; background: #fff url('../img/select-arrow-open.gif') right center no-repeat; display: block; float: right; border: 1px solid #ccc; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } .trigger:hover { color: #777; background: #f5f5f5 url(../img/select-arrow-open.gif) right center no-repeat; } .activetrigger { color: #777; padding: 5px; font-size: 13px; width: 90%; margin: 10px 15px 10px 0; background: #f5f5f5 url(../img/select-arrow-close.gif) right center no-repeat; display: block; float: right; border: 1px solid #ccc; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } .activetrigger:hover { background: #f5f5f5 url(../img/select-arrow-close.gif) right center no-repeat; color: #777; } .activetrigger:active { background: #f5f5f5 url(../img/select-arrow-close.gif) right center no-repeat; color: #777; } .dropcontainer ul { font-size: 13px; border: 1px solid #ccc; border-top: none; background: #fff; list-style-type: none; padding: 5px; top: 40px; right: 15px; width: 90%; z-index: 100; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } .dropcontainer ul li { padding: 5px; } .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: 150px; overflow-y: scroll; } 

 <form action="#"> <select class="turnintodropdown" id="1" name="1"> <option>11111111111111</option> <option>11111111111111</option> <option>11111111111111</option> <option>11111111111111</option> <option>11111111111111</option> </select> <select class="turnintodropdown" id="2" name="2"> <option>22222222222222</option> <option>22222222222222</option> <option>22222222222222</option> <option>22222222222222</option> <option>22222222222222</option> </select> </form> 

Answer 1

小提琴： http ： //jsfiddle.net/psyonix/g8n2vojw/1/

標記：

<form action="#">
            <select class="turnintodropdown" id="1" name="1">
                <option>11111111111111</option>
                <option>11111111111111</option>
                <option>11111111111111</option>
                <option>11111111111111</option>
                <option>11111111111111</option>
            </select>  
            <select class="turnintodropdown2" id="2" name="2">
                <option>22222222222222</option>
                <option>22222222222222</option>
                <option>22222222222222</option>
                <option>22222222222222</option>
                <option>22222222222222</option>
            </select> 
         </form>

劇本：

function tamingselect()
{
    if(!document.getElementById && !document.createTextNode){return;}

// Classes for the link and the visible dropdown
    var ts_selectclass='turnintodropdown2';
    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
}