旋转的钢笔
2018-01-15 02:16
采纳率: 19.3%
浏览 2.5k

怎样用ul 模拟select,并且支持多级菜单,可以获取选中的菜单的值?

现有需求,要求选择框可以支持多级菜单,如果我用ul去做,那么不能像select一样,
将选中的值放到顶端,现在我想要select 和ul 合并后的效果,既想要select效果,
又想要支持多级菜单,并且可以获取选中项的值?

  • 点赞
  • 写回答
  • 关注问题
  • 收藏
  • 邀请回答

6条回答 默认 最新

  • 已采纳

    时间有几天了,希望能够给你点帮助。
    首先,代码贴不出来了,只能谈一下思路。
    用ul去伪装select可以避免ie中出现自带箭号,破坏整体样式美观;其他的问题暂时没有发现。
    设计:
    第一,ul和li组合调整好样式,首先弄好外框,模拟成select的样子就行,设置click或这tap之类的事件
    在进行第二步之前,要明确我们的数据层级,并且获取到数据,了解数据相应的格式。
    第二,包装ul和li,为我们下拉选的内容添加鼠标悬浮的监听事件,1:要删除所有选中的class,2:为悬浮元素添加选中的class,3:添加弹出二级(多级雷同)下拉选内容的函数(包括显示和隐藏、获取数据等)
    第三,关于选中内容的思考,从你的描述看可能要实现,1:选中项置顶,2:打开下拉时默认滑动到上一次选中的位置
    这个其实都可以通过js实现的,如果能力不够或者找不到资料就想想一些变通的办法替代

    点赞 评论
  • 点赞 评论
  • Im_One 2018-01-15 02:49

    利用基于Bootstrap的select2组件,看看行不行。
    附博客链接 https://www.cnblogs.com/landeanfen/p/5099332.html
    若博客内容不满足需求的话,可以去bootstrap中文网去查找需要的组件,都是带源码的,http://www.bootcss.com/
    望采纳,谢谢!

    点赞 评论
  • qq_36527577 2018-01-15 02:51

    多级菜单的话,去找找tree树形结构,easyui就有,这个一般不自己手写。至于你说的用ul不能像select把选中的值放到顶端,你应该是在顶端用的input吧,在ul上加个点击事件赋值就行

    点赞 评论
  • wang_msheng 2018-01-15 05:07

    function Node(key,val){
    this.key=key;
    this.value=val;
    }
    function TwsSelect(objname,nooption,val,width) {
    this.objectname = objname;
    this.addnullopt = nooption;
    this.defaultval = val;
    this.width = width;
    this.options = new Array();
    this.rate = 6;//字符与象素比例
    if(this.addnullopt===true){
    this.options[this.options.length] = new Node('','请选择...');
    }
    }

    TwsSelect.prototype.addOption = function(key,value){
    this.options[this.options.length] = new Node(key,value);
    };

    TwsSelect.prototype.setWidth = function(w){
    this.width = w;
    };

    function cutstr(str,len)
    {
    var str_length = 0;
    var str_len = 0;

    var str_cut = new String();
    str_len = str.length;
    for(var i = 0;i<str_len;i=i+1){
        var a = str.charAt(i);
        str_length = str_length + 1;
        if(escape(a).length > 4) { //中文字符的长度经编码之后大于4
            str_length= str_length + 1;
        }
        str_cut = str_cut.concat(a);
        if(str_length>=len){
            str_cut = str_cut.concat("...");
            return str_cut;
        }
    }
    //如果给定字符串小于指定长度,则返回源字符串;
    return str;
    

    }

    TwsSelect.prototype.getDiv = function(in_objname){
    var rt = this.rate;
    var di = document.createElement('DIV');
    di.id="__"+this.objectname+"_div";
    di.className="select_box";
    if(this.width>0){
    di.style.width=this.width;
    }

    var vv = document.createElement("INPUT");
    vv.type="hidden";
    vv.readonly="true";
    vv.name=this.objectname;
    vv.value="";
    di.appendChild(vv);
    
    var ul = document.createElement("UL");
    di.appendChild(ul);
    
    var sp = document.createElement("INPUT");
    sp.type="text";
    sp.readonly="true";
    sp.name="__"+this.objectname+"_dsp";
    sp.className="select_box_dsp";
    sp.style.width=this.width;
    sp.onclick = function(){
        var d=this.parentNode.children[1];
        var u=d.children[1];
        if(d.style.display=='block'){
            d.style.position='relative';
            d.style.top = 0;
            d.style.display='none';
        }else {
            var oy = document.body.offsetTop;
            var oh = document.body.offsetHeight;
            var dy = this.getBoundingClientRect().top;
            var ih = this.clientHeight+2;//显示的输入框的高度(带线)
            var lh = 21;    //li的行高
            var uh = 0;     //ul的内容高度
            var uw = this.offsetWidth;
            var cv = d.children[0].value;   //当前选择项的值
            for(var k=0;k<u.children.length;k=k+1){
                var u_li = u.children[k];
                if(cv == u_li._key){
                    u_li.style.backgroundColor='#00ACDF';
                }else{
                    u_li.style.backgroundColor='#E0FFFF';
                }
                uh = uh + ((u_li.innerText.length*rt-1)/uw + 1) * lh;
            }
    
            var ydown = oh - dy - ih;
            var yup   = dy - oy;
    

    //alert("oy="+oy+" oh="+oh+" dy="+dy+" uw="+uw+" uh="+uh+" ydown="+ydown+" yup="+yup);
    d.style.position='absolute';
    if(uh <= ydown){
    d.style.top = dy + ih;
    u.style.top = 0;
    }else {
    if(ydown >= yup) {
    d.style.top = dy + ih;
    u.style.top = 0;
    u.style.height=ydown;
    }else {
    if(uh>=yup){
    d.style.top = 2*lh;
    u.style.top = 0;
    u.style.height = yup - 2*lh;
    }else {
    d.style.top = yup-uh;
    u.style.top = 0;
    u.style.height = uh;
    }
    }
    }
    d.style.display='block';
    }
    };
    sp.onblur = function(){
    var d=this.parentNode.children[1];
    if(d.style.display=='block'){
    d.style.position='relative';
    d.style.top = 0;
    d.style.display='none';
    }
    };

    ul._sponblur = sp.onblur;
    ul.onmouseover = function(){
        sp.onblur = null;
    };
    ul.onmouseout = function(){
        sp.onblur = this._sponblur;
        sp.focus();
    };
    
    var www = this.width/rt-7;
    var addval = false;
    for(var i=0;i<this.options.length;i=i+1){
        var node = this.options[i];
        var li = document.createElement("LI");
        li._key = node.key;
        li._value = node.value;
        li.innerText = node.value;
        li.onclick = function() {
            vv.value=this._key;
            sp.value=cutstr(this._value,www);
            di.style.position='relative';
            di.style.top = 0;
            di.style.display='none';
        };
        li.onmouseover = function(){
            this.style.backgroundColor='#00ACDF';
            this.style.color='#FFFFFF';
        };
        li.onmouseout = function(){
            this.style.backgroundColor='#E0FFFF';
            this.style.color='#000000';
        };
        ul.appendChild(li);
    
        if(node.key == this.defaultval){
            vv.value=node.key;
            sp.value=cutstr(node.value,www);
            addval = true;
        }
    }
    if(addval === false){
        if(this.options.length>0){
            vv.value=this.options[0].key;
            sp.value=cutstr(this.options[0].value,www);
        }
    }
    
    var inobj = document.getElementById(in_objname);
    inobj.appendChild(sp);
    inobj.appendChild(di);
    

    };

    点赞 评论
  • 旋转的钢笔 2018-01-25 02:10

    谢谢大家 ,问题已解决,已将代码上传到了资源,有需要的可自行下载 http://download.csdn.net/download/apbbbbb/10223008

    点赞 评论

相关推荐 更多相似问题