Question

普通的选择元素不能用用户样式调整（不包括背景，触发按钮和宽度），因此我使用了一个模拟器，它从DOM中删除了select元素并用<ul> <li>替换它包含选项值和一个显示所选值的隐藏输入。我知道，如何在正常选择中自动提交，但不知道如何让这个模拟器以这种方式工作。在下面的代码中，如何在用户选择列表中的项目时自动提交？

＆＃13;

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;
                document.myForm.submit();
            }
            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
    }

＆＃13;

<select class="turnintodropdown">
  <option>opt 1
  <option>opt 2
</select>

＆＃13;

Answer 1

我找到了解决方案。只包含一个输入类型=＆＃34;提交＆＃34;在每一个 <li>代替<a>。这一部分：

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

改为：

var newli=document.createElement('li');
var newsubm=document.createElement('input');
newsubm.type='submit';
newsubm.className='list-item'
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));
newsubm.value=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(newsubm);
replaceUL.appendChild(newli);

我不知道，如果它是对的，但它适用于我的情况。最后我得到了一个按钮列表，但按钮可以很容易地调整样式。

在选择选项模拟器中自动提交

1 个答案: