JQuery级联(ul仿select级联)
功能:【Juqery级联(ul仿select级联)】
创新互联建站-成都网站建设公司,专注成都网站设计、成都做网站、网站营销推广,域名注册,虚拟空间,网站托管有关企业网站制作方案、改版、费用等问题,请联系创新互联建站。
说明:最近做一个网站项目遇到的问题,需要美化select,所以就用ul模拟select, 之后就遇到个大问题了,就是要级联,select的话还好级联,现在是ul,所以级联就非常麻烦了.....需要实现:数组,循环,取值,赋值,清值,等等..
Jquery代码:
$(document).ready(function(){
$('.select_box').mouseleave(function(){
$(".son_Ul").hide();
});
$('.select_box span').click(function(){ //鼠标移动函数
$('.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':['中国','美国']
,'中国':['广东','河南','河北']
,'广东':['广州','深圳']
,'河南':['郑州','平顶山']
,'郑州':['金水区','大学城']
,'金水区':['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 是当前点击的li
prev 是当前所属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();
})
})
})
}
网页名称:JQuery级联(ul仿select级联)
网站网址:http://scyanting.com/article/ipghep.html