功能:【Juqery級聯(lián)(ul仿select級聯(lián))】
創(chuàng)新互聯(lián)建站-成都網(wǎng)站建設(shè)公司,專注成都網(wǎng)站設(shè)計、成都做網(wǎng)站、網(wǎng)站營銷推廣,域名注冊,虛擬空間,網(wǎng)站托管有關(guān)企業(yè)網(wǎng)站制作方案、改版、費用等問題,請聯(lián)系創(chuàng)新互聯(lián)建站。
說明:最近做一個網(wǎng)站項目遇到的問題,需要美化select,所以就用ul模擬select, 之后就遇到個大問題了,就是要級聯(lián),select的話還好級聯(lián),現(xiàn)在是ul,所以級聯(lián)就非常麻煩了.....需要實現(xiàn):數(shù)組,循環(huán),取值,賦值,清值,等等..
Jquery代碼:
$(document).ready(function(){
$('.select_box').mouseleave(function(){
$(".son_Ul").hide();
});
$('.select_box span').click(function(){ //鼠標(biāo)移動函數(shù)
$('.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
var arrays = {
'0':['中國','美國']
,'中國':['廣東','河南','河北']
,'廣東':['廣州','深圳']
,'河南':['鄭州','平頂山']
,'鄭州':['金水區(qū)','大學(xué)城']
,'金水區(qū)':['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("
})
})
function c(val,prev,next,nnext,nnnext,blo){
/**
val 是當(dāng)前點擊的li
prev 是當(dāng)前所屬ul
next 是下一個需要填充的ul
nnext 是下下個需要填充的ul 即點擊next后需要填充的
*/
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 = "
break;
case 2:
li = "
break;
case 3:
li = "
break;
case 4:
li = "
break;
case 5:
li = "
break;
case 6:
li = "
break;
case 7:
li = "
break;
case 8:
li = "
break;
}
$(ne).append(li);
})
}
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();
})
})
})
}