jquery实现的地址三级联动
jquery实现的地址三级联动部分代码展示：
$.fn.sjld=function(shenfen){
//省份
var sfp=shenfen+' p';
var sfs=shenfen +'.m_zlxg2';
var sfli = shenfen+' ul li'
//城市
var csp=chengshi+ ' p';
var css=chengshi+' .m_zlxg2';
var csli=chengshi+' ul li';
//县,区域
var qup=quyu+' p';
var qus=quyu+' .m_zlxg2';
var quli=quyu+' ul li';
$('.m_zlxg').click(function(){
$(this).find('.m_zlxg2').slideDown(200);
});
$('.m_zlxg').mouseleave(function(){
$(this).find('.m_zlxg2').slideUp(200);
})
var sfgsmr = provinceList;//获取省份，第一个参数
var csgsmr =provinceList.cityList;//获取城市
var qygsmr = provinceList.cityList.areaList;
var kuandu=new Array();
$(sfp).text(sfgsmr.name);
$(csp).text(csgsmr.name);
$(qup).text(qygsmr);
//获取省份
for(var a=0;a<sfgsmr.length;a++){
var sfmcmr=sfgsmr.name;
var sfnrmr="<li>"+sfmcmr+"</li>";
$(shenfen).find('ul').append(sfnrmr);
}
//获取城市
for(var b=0;b<csgsmr.length;b++){
var csmcmr=csgsmr.name;
var csnrmr="<li>"+csmcmr+"</li>";
$(chengshi).find('ul').append(csnrmr);
kuandu=csmcmr.length*14+20;
}
//区域
for(var c=0;c<qugsmr.length;c++){
var qumcmr=qugsmr.name;
var qunrmr="<li>"+qumcmr+"</li>";
$(quyu).find('ul').append(qunrmr);
}
/*Array.max=function(array){
return Math.max.apply(Math,array);
}
var max_kd=Array.max(kuandu);*/
//选择省份【选择省份后，自动出现省份下面第一个城市，第一个城市下的第一个区域】
$(sfli).click(function(){
var dqsf=$(this).text();
$(shenfen).find('p').text(dqsf);
$(shenfen).find('p').attr('title',dqsf);
var sfnum=$(this).index();
var csgs=provinceList.cityList;//选择省份下相应的城市
var csgs2=provinceList.cityList.areaList;//选择城市下的县
$(chengshi).find('ul').text('');
var kuandu=new Array();
//将省份相应城市的区域添加到ul中
for(var i=0;i<csgs.length;i++){
var csmc=csgs.name;
var csnr="<li>"+csmc+"</li>";
$(chengshi).find('ul').append(csnr);
kuandu=csmc.length*14+20;
}
Array.max=function(array){
return Math.max.apply(Math,array);
}
var max_kd=Array.max(kuandu);
if(max_kd<91){
$(css).width("91px");
}else{
$(css).width(kuandu);
}
//将城市下相应的区域添加到ul中
var qugsdqmr=provinceList.cityList.areaList;
$(quyu).find('ul').text('');
for(j=0;j<qugsdqm.length;j++){
var qumc=qugsdqmr.name;
var qunr="<li>"+qumc+"</li>"
$(quyu).find('ul').append(qunr);
}
$(csp).text(csgs.name);
$(qup).text(csgs2);
$('#sfdq_num').val(sfnum);
});
//选择城市
$(csli).click(function(){
var dqcs=$(this).text();
var dqcs_num=$('#sfdq_num').val();//省份的索引值
if(dqsf_num==""){
dqsf_num=0;
}else{
var dqsf=$('#sfdq_num').val();
}
$(chengshi).find('p').text(dqcs);
$(chengshi).find('p').attr('title',dqcs);
var csnum=$(this).index();
var qygs=provinceList.cityList.areaList;
$(quyu).find('ul').text('');
//获取相应城市下的区域
for(var j=0;j<qygs.length;j++){
var qymc=qygs;
var qynr="<li>"+qumc+"</li>";
$(quyu).find('ul').append(qynr);
}
$(qup).text(qygs);
$('#csdq_num').val(csnum);
$(this).parent('.m_zlxg2').width(kuandu);
$(qyli).click(function(){
var dqqy=$(this).text();
$(quyu).find('p').text(dqqy);
$(quyu).find('p').attr('title',dqqy);
});
});
//选择区域
$(quyu).click(function(){
var dqqy=$(this).text();
$(quyu).find('p').text(dqqy);
$(quyu).find('p').attr('title',dqqy);
});
$(csli).click(function(){
var dqcs = $(this).text();
var dqsf_num = $('#sfdq_num').val();
if(dqsf_num==""){
dqsf_num=0;
}else{
var dqsf_num = $('#sfdq_num').val();
}
$(chengshi).find('p').text(dqcs);
$(chengshi).find('p').attr('title',dqcs);
var csnum = $(this).index();
var qygs = provinceList.cityList.areaList;
$(quyu).find('ul').text('');
for(j=0;j<qygs.length;j++){
var qymc = qygs;
var qynr = "<li>"+qymc+"</li>";
$(quyu).find('ul').append(qynr);
}
$(qyp).text(qygs);
$('#csdq_num').val(csnum);
$(qyli).click(function(){
var dqqy = $(this).text();
$(quyu).find('p').text(dqqy);
$(quyu).find('p').attr('title',dqqy);
})
})
$(qyli).click(function(){
var dqqy = $(this).text();
$(quyu).find('p').text(dqqy);
$(quyu).find('p').attr('title',dqqy);
})//区级
/*---------------------------------------------------------------------*/
$('.m_zlxg').click(function(){
$('#sfdq_tj').val($(sfp).text());
$('#csdq_tj').val($(csp).text());
$('#qydq_tj').val($(qyp).text());
})//表单传值获取
}
学习学习。。。。。。。。。。
谢谢楼主啊。很实用的
页:
[1]