继续浏览精彩内容
慕课网APP
程序员的梦工厂
打开
继续
感谢您的支持,我会继续努力的
赞赏金额会直接到老师账户
将二维码发送给自己后长按识别
微信支付
支付宝支付

JQuery 级联(ul仿select级联)

慕工程3455409
关注TA
已关注
手记 318
粉丝 78
获赞 293

功能:【Juqery级联(ul仿select级联)】

说明:最近做一个网站项目遇到的问题,需要美化select,所以就用ul模拟select, 之后就遇到个大问题了,就是要级联,select的话还好级联,现在是ul,所以级联就非常麻烦了.....需要实现:数组,循环,取值,赋值,清值,等等..

Jquery代码:

 

<script type="text/javascript">

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

</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>

HTML代码:<body><ul class="main_box">  <span class="point">*</span>  <li class="select_box" > <span>请选择</span>    <ul class="son_Ul" id="guojia">    </ul>  </li></ul><ul class="main_box">  <span class="point">*</span>  <li class="select_box" > <span>请选择</span>    <ul class="son_Ul" id="shengfen">    </ul>  </li></ul><br  /><ul id="main_box">  <span class="point">*</span>  <li class="select_box" > <span>请选择</span>    <ul class="son_Ul" id="chengshi">    </ul>  </li></ul><ul class="main_box">  <span class="point">*</span>  <li class="select_box" > <span>请选择</span>    <ul class="son_Ul" id="xx">    </ul>  </li></ul><br  /><ul id="main_box">  <span class="point">*</span>  <li class="select_box" > <span>请选择</span>    <ul class="son_Ul" id="yy">    </ul>  </li></ul><ul class="main_box">  <span class="point">*</span>  <li class="select_box" > <span>请选择</span>    <ul class="son_Ul" id="zz">    </ul>  </li></ul><ul class="main_box">  <span class="point">*</span>  <li class="select_box" > <span>请选择</span>    <ul class="son_Ul" id="aa">    </ul>  </li></ul><ul class="main_box">  <span class="point">*</span>  <li class="select_box" > <span>请选择</span>    <ul class="son_Ul" id="bb">    </ul>  </li></ul><ul class="main_box">  <span class="point">*</span>  <li class="select_box" > <span>请选择</span>    <ul class="son_Ul" id="cc">    </ul>  </li></ul></body>
 CSS样式:
<style type="text/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> ---------------成功例子已上传附件,有需要的可以下载

 

打开App,阅读手记
0人推荐
发表评论
随时随地看视频慕课网APP