Блог

У меня возникла проблема с пользовательским полем выбора с использованием скрипта. Это работает, но, например, если вы начинаете с нижнего поля выбора и щелкаете по нему, затем щелкаете по середине, а затем сверху, он работает так, как и должен, закрыв предыдущее поле.

Однако, если вы нажмете среднее поле после верхнего, также откроется верхнее поле, и это произойдет со всеми полями.

Есть ли какое-либо решение для этого?

Вот мой jsFiddle

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


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

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  ;
    }
}


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
    if (o.nodeName.toUpperCase()=='A'amp;amp;ts_check(o,c1)){
     if (ts_swapclass.lstamp;amp;ts_swapclass.lst!=o){
      ts_swapclass(ts_swapclass.lst,ts_triggeroff,ts_triggeron);
      ts_swapclass(ts_swapclass.lst.parentNode.getElementsByTagName('ul')  [0],ts_dropdownclosed,ts_dropdownopen);
     }
     ts_swapclass.lst=o;
    }
    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();
 }
  

Мне не удалось исправить код, поэтому я нашел быстрое решение, которое работает идеально.

Спасибо всем, кто пытался.

* Исправить

 $( ".d2" ).click(function() {
    $('.d3 .dropcontainer').css("display", "none");
});

$( ".d1" ).click(function() {
    $('.d2 .dropcontainer').css("display", "none");
});

$( ".d1" ).click(function() {
    $('.d3 .dropcontainer').css("display", "none");
});


$( ".d3" ).click(function() {
    $('.d1 .dropcontainer').css("display", "none");
});

$( ".d3" ).click(function() {
    $('.d2 .dropcontainer').css("display", "none");
});


$('.d3').click(function() {
    $('.d3 .dropcontainer').css("display", "block");
});

$('.d2').click(function() {
    $('.d2 .dropcontainer').css("display", "block");
});

$('.d1').click(function() {
    $('.d1 .dropcontainer').css("display", "block");
});
  

 $(document).mouseup(function (e){
        div_cld = $('.dropcontainer');
        div_par = $('.activetrigger');
        if (!div_cld.is(e.target) amp;amp; !div_par.is(e.target) amp;amp; div_cld.has(e.target).length === 0) {
            div_cld.find('ul').removeClass('dropdownvisible');
            div_cld.find('ul').addClass('dropdownhidden');
        }
    });