JQuery 級聯(ul仿select級聯)

功能:【Juqery級聯(ul仿select級聯)】javascript

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

Jquery代碼:html

 

<script type="text/javascript">java

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

<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" style="z-index:200"> <span>請選擇</span>
    <ul class="son_Ul" id="guojia">
    </ul>
  </li>
</ul>
<ul class="main_box">
  <span class="point">*</span>
  <li class="select_box" style="z-index:200"> <span>請選擇</span>
    <ul class="son_Ul" id="shengfen">
    </ul>
  </li>
</ul>
<br style="clear:both" />
<ul id="main_box">
  <span class="point">*</span>
  <li class="select_box" style="z-index:199"> <span>請選擇</span>
    <ul class="son_Ul" id="chengshi">
    </ul>
  </li>
</ul>
<ul class="main_box">
  <span class="point">*</span>
  <li class="select_box" style="z-index:199"> <span>請選擇</span>
    <ul class="son_Ul" id="xx">
    </ul>
  </li>
</ul>
<br style="clear:both" />
<ul id="main_box">
  <span class="point">*</span>
  <li class="select_box" style="z-index:198"> <span>請選擇</span>
    <ul class="son_Ul" id="yy">
    </ul>
  </li>
</ul>
<ul class="main_box">
  <span class="point">*</span>
  <li class="select_box" style="z-index:198"> <span>請選擇</span>
    <ul class="son_Ul" id="zz">
    </ul>
  </li>
</ul>
<ul class="main_box">
  <span class="point">*</span>
  <li class="select_box" style="z-index:198"> <span>請選擇</span>
    <ul class="son_Ul" id="aa">
    </ul>
  </li>
</ul>
<ul class="main_box">
  <span class="point">*</span>
  <li class="select_box" style="z-index:198"> <span>請選擇</span>
    <ul class="son_Ul" id="bb">
    </ul>
  </li>
</ul>
<ul class="main_box">
  <span class="point">*</span>
  <li class="select_box" style="z-index:198"> <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>
 
---------------成功例子已上傳附件,有須要的能夠下載
相關文章
相關標籤/搜索