JQuery級(jí)聯(lián)（ul仿select級(jí)聯(lián)）

功能：【Juqery級(jí)聯(lián)（ul仿select級(jí)聯(lián)）】

創(chuàng)新互聯(lián)建站-成都網(wǎng)站建設(shè)公司，專注成都網(wǎng)站設(shè)計(jì)、成都做網(wǎng)站、網(wǎng)站營銷推廣，域名注冊，虛擬空間，網(wǎng)站托管有關(guān)企業(yè)網(wǎng)站制作方案、改版、費(fèi)用等問題，請(qǐng)聯(lián)系創(chuàng)新互聯(lián)建站。

說明：最近做一個(gè)網(wǎng)站項(xiàng)目遇到的問題,需要美化select,所以就用ul模擬select, 之后就遇到個(gè)大問題了，就是要級(jí)聯(lián)，select的話還好級(jí)聯(lián)，現(xiàn)在是ul，所以級(jí)聯(lián)就非常麻煩了.....需要實(shí)現(xiàn)：數(shù)組，循環(huán)，取值，賦值，清值，等等..

Jquery代碼：

 

<script type="text/javascript">

  $(document).ready(function(){

 $('.select_box').mouseleave(function(){

$(".son_Ul").hide();

}); 

 

$('.select_box span').click(function(){ //鼠標(biāo)移動(dòng)函數(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 

</script>

<script type="text/javascript">

var arrays = {

'0':['中國','美國']

 ,'中國':['廣東','河南','河北']

 ,'廣東':['廣州','深圳']

 ,'河南':['鄭州','平頂山']

 ,'鄭州':['金水區(qū)','大學(xué)城']

 ,'金水區(qū)':['XX路','YY']

 ,'XX路':['19號(hào)','22號(hào)']

 ,'19號(hào)':['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 是當(dāng)前點(diǎn)擊的li

prev 是當(dāng)前所屬ul

next 是下一個(gè)需要填充的ul

nnext 是下下個(gè)需要填充的ul   即點(diǎn)擊next后需要填充的<ul></ul>

*/

var checkVal = $(val).text();

var cr = document.getElementById(prev);

var ne = document.getElementById(next);

$(cr).prev().text(checkVal);

$(ne).prev().text('請(qǐng)選擇');

aa($(cr).attr("id"));

var datas = arrays[checkVal];

$.each(datas,function(i,value){//遍歷填充到下一級(jí)的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("請(qǐng)選擇");

$(ul).find("li").each(function(i,li){

$(li).remove();

})

})

})

}

</script>

 

標(biāo)題名稱：JQuery級(jí)聯(lián)（ul仿select級(jí)聯(lián)）
鏈接地址：http://muchs.cn/article48/ipghep.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站設(shè)計(jì)、網(wǎng)站排名、企業(yè)網(wǎng)站制作、建站公司、云服務(wù)器、虛擬主機(jī)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)