如何使函數使用相同的類？

Question

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

我試着添加不同的類，但不幸的是，它不適合我。 我錯在哪裏？

function tamingselect() 
 
{ 
 
\t if(!document.getElementById && !document.createTextNode){return;} 
 
\t 
 
// Classes for the link and the visible dropdown 
 
\t var ts_selectclass='turnintodropdown'; \t // class to identify selects 
 
\t var ts_listclass='turnintoselect'; \t \t // class to identify ULs 
 
\t var ts_boxclass='dropcontainer'; \t \t // parent element 
 
\t var ts_triggeron='activetrigger'; \t \t // class for the active trigger link 
 
\t var ts_triggeroff='trigger'; \t \t \t // class for the inactive trigger link 
 
\t var ts_dropdownclosed='dropdownhidden'; // closed dropdown 
 
\t var ts_dropdownopen='dropdownvisible'; \t // open dropdown 
 
/* 
 
\t Turn all selects into DOM dropdowns 
 
*/ 
 
\t var count=0; 
 
\t var toreplace=new Array(); 
 
\t var sels=document.getElementsByTagName('select'); 
 
\t for(var i=0;i<sels.length;i++){ 
 
\t \t if (ts_check(sels[i],ts_selectclass)) 
 
\t \t { 
 
\t \t \t var hiddenfield=document.createElement('input'); 
 
\t \t \t hiddenfield.name=sels[i].name; 
 
\t \t \t hiddenfield.type='hidden'; 
 
\t \t \t hiddenfield.id=sels[i].id; 
 
\t \t \t hiddenfield.value=sels[i].options[0].value; 
 
\t \t \t sels[i].parentNode.insertBefore(hiddenfield,sels[i]) 
 
\t \t \t var trigger=document.createElement('a'); 
 
\t \t \t ts_addclass(trigger,ts_triggeroff); 
 
\t \t \t trigger.href='#'; 
 
\t \t \t trigger.onclick=function(){ 
 
\t \t \t \t ts_swapclass(this,ts_triggeroff,ts_triggeron) 
 
\t \t \t \t ts_swapclass(this.parentNode.getElementsByTagName('ul')[0],ts_dropdownclosed,ts_dropdownopen); 
 
\t \t \t \t return false; 
 
\t \t \t } 
 
\t \t \t trigger.appendChild(document.createTextNode(sels[i].options[0].text)); 
 
\t \t \t sels[i].parentNode.insertBefore(trigger,sels[i]); 
 
\t \t \t var replaceUL=document.createElement('ul'); 
 
\t \t \t for(var j=0;j<sels[i].getElementsByTagName('option').length;j++) 
 
\t \t \t { 
 
\t \t \t \t var newli=document.createElement('li'); 
 
\t \t \t \t var newa=document.createElement('a'); 
 
\t \t \t \t newli.v=sels[i].getElementsByTagName('option')[j].value; 
 
\t \t \t \t newli.elm=hiddenfield; 
 
\t \t \t \t newli.istrigger=trigger; 
 
\t \t \t \t newa.href='#'; 
 
\t \t \t \t newa.appendChild(document.createTextNode(
 
\t \t \t \t sels[i].getElementsByTagName('option')[j].text)); 
 
\t \t \t \t newli.onclick=function(){ 
 
\t \t \t \t \t this.elm.value=this.v; 
 
\t \t \t \t \t ts_swapclass(this.istrigger,ts_triggeron,ts_triggeroff); 
 
\t \t \t \t \t ts_swapclass(this.parentNode,ts_dropdownopen,ts_dropdownclosed) 
 
\t \t \t \t \t this.istrigger.firstChild.nodeValue=this.firstChild.firstChild.nodeValue; 
 
\t \t \t \t \t return false; 
 
\t \t \t \t } 
 
\t \t \t \t newli.appendChild(newa); 
 
\t \t \t \t replaceUL.appendChild(newli); 
 
\t \t \t } 
 
\t \t \t ts_addclass(replaceUL,ts_dropdownclosed); 
 
\t \t \t var div=document.createElement('div'); 
 
\t \t \t div.appendChild(replaceUL); 
 
\t \t \t ts_addclass(div,ts_boxclass); 
 
\t \t \t sels[i].parentNode.insertBefore(div,sels[i]) 
 
\t \t \t toreplace[count]=sels[i]; 
 
\t \t \t count++; 
 
\t \t } 
 
\t } 
 
\t 
 
/* 
 
\t Turn all ULs with the class defined above into dropdown navigations 
 
*/ \t 
 

 
\t var uls=document.getElementsByTagName('ul'); 
 
\t for(var i=0;i<uls.length;i++) 
 
\t { 
 
\t \t if(ts_check(uls[i],ts_listclass)) 
 
\t \t { 
 
\t \t \t var newform=document.createElement('form'); 
 
\t \t \t var newselect=document.createElement('select'); 
 
\t \t \t for(j=0;j<uls[i].getElementsByTagName('a').length;j++) 
 
\t \t \t { 
 
\t \t \t \t var newopt=document.createElement('option'); 
 
\t \t \t \t newopt.value=uls[i].getElementsByTagName('a')[j].href; \t 
 
\t \t \t \t newopt.appendChild(document.createTextNode(uls[i].getElementsByTagName('a')[j].innerHTML)); \t 
 
\t \t \t \t newselect.appendChild(newopt); 
 
\t \t \t } 
 
\t \t \t newselect.onchange=function() 
 
\t \t \t { 
 
\t \t \t \t window.location=this.options[this.selectedIndex].value; 
 
\t \t \t } 
 
\t \t \t newform.appendChild(newselect); 
 
\t \t \t uls[i].parentNode.insertBefore(newform,uls[i]); 
 
\t \t \t toreplace[count]=uls[i]; 
 
\t \t \t count++; 
 
\t \t } 
 
\t } 
 
\t for(i=0;i<count;i++){ 
 
\t \t toreplace[i].parentNode.removeChild(toreplace[i]); 
 
\t } 
 
\t function ts_check(o,c) 
 
\t { 
 
\t \t return new RegExp('\\b'+c+'\\b').test(o.className); 
 
\t } 
 
\t function ts_swapclass(o,c1,c2) 
 
\t { 
 
\t \t var cn=o.className 
 
\t \t o.className=!ts_check(o,c1)?cn.replace(c2,c1):cn.replace(c1,c2); 
 
\t } 
 
\t function ts_addclass(o,c) 
 
\t { 
 
\t \t if(!ts_check(o,c)){o.className+=o.className==''?c:' '+c;} 
 
\t } 
 
} 
 

 
window.onload=function() 
 
{ 
 
\t tamingselect(); 
 
\t // 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>