功能:【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>