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

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

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

jquery仿京东商城三级联动代码插件

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

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

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

};

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