JQuery 級聯（ul仿select級聯）

時間 2020-11-12

標籤 javascript css html java 數組 app ide 函數網站 this 欄目 JQuery 简体版

原文原文鏈接

功能：【Juqery級聯（ul仿select級聯）】javascript

說明：最近作一個網站項目遇到的問題,須要美化select,因此就用ul模擬select, 以後就遇到個大問題了，就是要級聯，select的話還好級聯，如今是ul，因此級聯就很是麻煩了.....須要實現：數組，循環，取值，賦值，清值，等等..css

Jquery代碼：html

$(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>

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>

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>

</li>

</ul>

</ul>

</li>

</ul>

</ul>

</li>

</ul>

</ul>

</li>

</ul>

</ul>

</li>

</ul>

</ul>

</li>

</ul>

</ul>

</li>

</ul>

</ul>

</li>

</ul>

</ul>

</li>

</ul>

</body>

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>

---------------成功例子已上傳附件，有須要的能夠下載

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。