功能：【Juqery级联（ul仿select级联）】
说明：最近做一个网站项目遇到的问题,需要美化select,所以就用ul模拟select, 之后就遇到个大问题了，就是要级联，select的话还好级联，现在是ul，所以级联就非常麻烦了.....需要实现：数组，循环，取值，赋值，清值，等等..
Jquery代码：
<script type="text/javascript">
$(document).ready(function(){
$('.select_box').mouseleave(function(){
$(".son_Ul").hide();
});
$('.select_box span').click(function(){ //鼠标移动函数
$('.son_Ul').hide(); //初始ul隐藏
$(this).parent().find('ul.son_Ul').show(); //找到ul.son_Ul显示
$(this).parent().find('li').hover(function(){
$(this).addClass('hover')},function(){$(this).removeClass('hover')}); //li的hover效果
$(this).parent().click(function(){},
function(){
$(this).parent().find("ul.son_Ul").hide();
}
);
},function(){}
);
$('ul.son_Ul li').click(function(){
$(this).parents('li').find('span').html($(this).html());
$(this).parents('li').find('ul').hide();
});
});
//第一次写demo，很冗长，见谅 larthas@vip.qq.com www.515best.com www.hicafe.cn By：larthas
</script>
<script type="text/javascript">
var arrays = {
'0':['中国','美国']
,'中国':['广东','河南','河北']
,'广东':['广州','深圳']
,'河南':['郑州','平顶山']
,'郑州':['金水区','大学城']
,'金水区':['XX路','YY']
,'XX路':['19号','22号']
,'19号':['1','2']
,'1':['a','b']
,'a':['A','B']};
$(document).ready(function(){
var guojia = arrays['0'];
$.each(guojia,function(i,value){
$("#guojia").append("<li onclick='c(this,\"guojia\",\"shengfen\",\"chengshi\",\"xx\",1)'>"+value+"</li>");
})
})
function c(val,prev,next,nnext,nnnext,blo){
/**
val 是当前点击的li
prev 是当前所属ul
next 是下一个需要填充的ul
nnext 是下下个需要填充的ul 即点击next后需要填充的<ul></ul>
*/
var checkVal = $(val).text();
var cr = document.getElementById(prev);
var ne = document.getElementById(next);
$(cr).prev().text(checkVal);
$(ne).prev().text('请选择');
aa($(cr).attr("id"));
var datas = arrays[checkVal];
$.each(datas,function(i,value){//遍历填充到下一级的ul中
var li;
switch(blo){
case 1:
li = "<li onclick='c(this,\""+next+"\",\""+nnext+"\",\""+nnnext+"\",\"yy\",2)'>"+value+"</li>";
break;
case 2:
li = "<li onclick='c(this,\""+next+"\",\""+nnext+"\",\"yy\",\"zz\",3)'>"+value+"</li>";
break;
case 3:
li = "<li onclick='c(this,\""+next+"\",\""+nnext+"\",\"zz\",\"aa\",4)'>"+value+"</li>";
break;
case 4:
li = "<li onclick='c(this,\""+next+"\",\""+nnext+"\",\"aa\",\"bb\",5)'>"+value+"</li>";
break;
case 5:
li = "<li onclick='c(this,\""+next+"\",\""+nnext+"\",\"bb\",\"cc\",6)'>"+value+"</li>";
break;
case 6:
li = "<li onclick='c(this,\""+next+"\",\""+nnext+"\",\"cc\",\"\",7)'>"+value+"</li>";
break;
case 7:
li = "<li onclick='c(this,\""+next+"\",\""+nnext+"\",\"\",\"\",8)'>"+value+"</li>";
break;
case 8:
li = "<li onclick=\"$(this).parent().prev().text($(this).text());\">"+value+"</li>";
break;
}
$(ne).append(li);
})
}
</script>
<script type="text/javascript">
function aa(id){
var t = document.getElementById(id);
$(t).parent().parent().nextAll("ul").each(function(i,v){
$(v).find("ul.son_Ul").each(function(i,ul){
$(ul).prev().text("请选择");
$(ul).find("li").each(function(i,li){
$(li).remove();
})
})
})
}
</script>
HTML代码：<body><ul class="main_box"> <span class="point">*</span> <li class="select_box" > <span>请选择</span> <ul class="son_Ul" id="guojia"> </ul> </li></ul><ul class="main_box"> <span class="point">*</span> <li class="select_box" > <span>请选择</span> <ul class="son_Ul" id="shengfen"> </ul> </li></ul><br /><ul id="main_box"> <span class="point">*</span> <li class="select_box" > <span>请选择</span> <ul class="son_Ul" id="chengshi"> </ul> </li></ul><ul class="main_box"> <span class="point">*</span> <li class="select_box" > <span>请选择</span> <ul class="son_Ul" id="xx"> </ul> </li></ul><br /><ul id="main_box"> <span class="point">*</span> <li class="select_box" > <span>请选择</span> <ul class="son_Ul" id="yy"> </ul> </li></ul><ul class="main_box"> <span class="point">*</span> <li class="select_box" > <span>请选择</span> <ul class="son_Ul" id="zz"> </ul> </li></ul><ul class="main_box"> <span class="point">*</span> <li class="select_box" > <span>请选择</span> <ul class="son_Ul" id="aa"> </ul> </li></ul><ul class="main_box"> <span class="point">*</span> <li class="select_box" > <span>请选择</span> <ul class="son_Ul" id="bb"> </ul> </li></ul><ul class="main_box"> <span class="point">*</span> <li class="select_box" > <span>请选择</span> <ul class="son_Ul" id="cc"> </ul> </li></ul></body>
CSS样式：
<style type="text/css"><!--body { padding:10px; background:#eee; color:#666}* { margin:0; padding:0; font-size:12px;}ul, li { list-style-type:none; margin: 0px; padding: 0px;}.point { color: #a40000; float: left; display: block; height: 30px; line-height: 30px;}.select_box { float:left; width:65px; padding-right:10px; padding-left:10px; url(left-selectbg.gif ) no-repeat 65px center; position:relative; z-index:101;}.select_box span { cursor:pointer; display:block; line-height:25px; width:100%; height:25px; overflow:hidden;}.select_box ul li { cursor:pointer;}.son_Ul { width:75px; ; position:absolute; z-index:101; left:-1px; top:25px; border:1px solid #ccc; display: none; background-color: #fff;}.son_Ul li { display:block; line-height:25px; padding-left:10px; width:65px;}.hover { background:#ccc;}--></style> ---------------成功例子已上传附件，有需要的可以下载
共同学习，写下你的评论
评论加载中...
作者其他优质文章
