当前位置： 移动技术网 > IT编程>开发语言>JavaScript > javascript代码实现可编辑下拉框

javascript代码实现可编辑下拉框

2018年10月14日  | 移动技术网IT编程  | 我要评论

javascript之可编辑下拉框

html里的select box只能下拉选择，是不可以编辑的，本范例实现了一个既可以编辑又可以下拉的select box，在很多项目中能够用到。

看看效果图：

\

如图可以实现编辑下拉框，实现既有文本框功能又有下拉框功能。

就是input控件基础上添加可选项

<input type="text" name="mytext" value="norway" selectboxoptions="canada;denmark;finland;germany;mexico;norway;sweden;united kingdom;united states">

js实现：

function createeditableselect(dest)  
    {  
  
        dest.classname='selectboxinput';          
        var p = document.createelement('div');  
        p.style.stylefloat = 'left';  
        p.style.width = dest.offsetwidth + 16 + 'px';  
        p.style.position = 'relative';  
        p.id = 'selectbox' + selectboxids;  
        var parent = dest.parentnode;  
        parent.insertbefore(p,dest);  
        p.appendchild(dest);    
        p.classname='selectbox';  
        p.style.zindex = 10000 - selectboxids;  
  
        var img = document.createelement('img');  
        img.src = arrowimage;  
        img.classname = 'selectboxarrow';  
          
        img.onmouseover = selectbox_switchimageurl;  
        img.onmouseout = selectbox_switchimageurl;  
        img.onclick = selectbox_showoptions;  
        img.id = 'arrowselectbox' + selectboxids;  
  
        p.appendchild(img);  
          
        var optiondiv = document.createelement('div');  
        optiondiv.id = 'selectboxoptions' + selectboxids;  
        optiondiv.classname='selectboxoptioncontainer';  
        optiondiv.style.width = p.offsetwidth-2 + 'px';  
        p.appendchild(optiondiv);  
          
        if(navigator.useragent.indexof('msie')>=0){  
            var iframe = document.createelement('<iframe src="about:blank" frameborder=0>');  
            iframe.style.width = optiondiv.style.width;  
            iframe.style.height = optiondiv.offsetheight + 'px';  
            iframe.style.display='none';  
            iframe.id = 'selectboxiframe' + selectboxids;  
            p.appendchild(iframe);  
        }  
          
        if(dest.getattribute('selectboxoptions')){  
            var options = dest.getattribute('selectboxoptions').split(';');  
            var optionstotalheight = 0;  
            var optionarray = new array();  
            for(var no=0;no<options.length;no++){  
                var anoption = document.createelement('div');  
                anoption.innerhtml = options[no];  
                anoption.classname='selectboxanoption';  
                anoption.onclick = selectoptionvalue;  
                anoption.style.width = optiondiv.style.width.replace('px','') - 2 + 'px';   
                anoption.onmouseover = highlightselectboxoption;  
                optiondiv.appendchild(anoption);      
                optionstotalheight = optionstotalheight + anoption.offsetheight;  
                optionarray.push(anoption);  
            }  
            if(optionstotalheight > optiondiv.offsetheight){               
                for(var no=0;no<optionarray.length;no++){  
                    optionarray[no].style.width = optiondiv.style.width.replace('px','') - 22 + 'px';     
                }     
            }         
            optiondiv.style.display='none';  
            optiondiv.style.visibility='visible';  
        }  
          
        selectboxids = selectboxids + 1;  
    }

您可能感兴趣的文章:

如对本文有疑问， 点击进行留言回复！！

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网