功能：【Juqery级联（ul仿select级联）】javascript
说明：最近作一个网站项目遇到的问题,须要美化select,因此就用ul模拟select, 以后就遇到个大问题了，就是要级联，select的话还好级联，如今是ul，因此级联就很是麻烦了.....须要实现：数组，循环，取值，赋值，清值，等等..css
Jquery代码：html
<script type="text/javascript">java
$(document).ready(function(){数组
$('.select_box').mouseleave(function(){app
$(".son_Ul").hide(); ide
}); 函数
$('.select_box span').click(function(){ //鼠标移动函数网站
$('.son_Ul').hide(); //初始ul隐藏this
$(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>