QQ账号登录	立即注册>>

您现在的位置：论坛 › 资料库 › 前端开发 > jquery实现的地址三级联动

总共48085条微博

动态微博

发表新帖

查看: 2765|回复: 2

jquery实现的地址三级联动

279 主题	41 听众	689 金钱

版主

该用户从未签到

电梯直达

楼主

发表于 2015-03-31 15:59:55 |只看该作者 |倒序浏览

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[0].cityList;//获取城市
var qygsmr = provinceList[0].cityList[0].areaList;
var kuandu=new Array();
$(sfp).text(sfgsmr[0].name);
$(csp).text(csgsmr[0].name);
$(qup).text(qygsmr[0]);
//获取省份
for(var a=0;a<sfgsmr.length;a++){
var sfmcmr=sfgsmr[a].name;
var sfnrmr="<li>"+sfmcmr+"</li>";
$(shenfen).find('ul').append(sfnrmr);
}
//获取城市
for(var b=0;b<csgsmr.length;b++){
var csmcmr=csgsmr[b].name;
var csnrmr="<li>"+csmcmr+"</li>";
$(chengshi).find('ul').append(csnrmr);
kuandu[b]=csmcmr.length*14+20;
}
//区域
for(var c=0;c<qugsmr.length;c++){
var qumcmr=qugsmr[c].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);*/
//选择省份[4行]【选择省份后，自动出现省份下面第一个城市，第一个城市下的第一个区域】
$(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[sfnum].cityList;//选择省份下相应的城市
var csgs2=provinceList[sfnum].cityList[0].areaList;//选择城市下的县
$(chengshi).find('ul').text('');
var kuandu=new Array();
//将省份相应城市的区域添加到ul中
for(var i=0;i<csgs.length;i++){
var csmc=csgs[i].name;
var csnr="<li>"+csmc+"</li>";
$(chengshi).find('ul').append(csnr);
kuandu[i]=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[sfnum].cityList[0].areaList;
$(quyu).find('ul').text('');
for(j=0;j<qugsdqm.length;j++){
var qumc=qugsdqmr[j].name;
var qunr="<li>"+qumc+"</li>"
$(quyu).find('ul').append(qunr);
}
$(csp).text(csgs[0].name);
$(qup).text(csgs2[0]);
$('#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[dqsf_num].cityList[csnum].areaList;
$(quyu).find('ul').text('');
//获取相应城市下的区域
for(var j=0;j<qygs.length;j++){
var qymc=qygs[j];
var qynr="<li>"+qumc+"</li>";
$(quyu).find('ul').append(qynr);
}
$(qup).text(qygs[0]);
$('#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[dqsf_num].cityList[csnum].areaList;
$(quyu).find('ul').text('');
for(j=0;j<qygs.length;j++){
var qymc = qygs[j];
var qynr = "<li>"+qymc+"</li>";
$(quyu).find('ul').append(qynr);
}
$(qyp).text(qygs[0]);
$('#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());
})//表单传值获取
}

复制代码

地址三级联动.zip (73.34 KB, 下载次数: 74)

科帮网-Java论坛、Java社区、JavaWeb毕业设计 1、本主题所有言论和图片纯属会员个人意见，与本社区立场无关
2、本站所有主题由该帖子作者发表，该帖子作者与科帮网-Java论坛、Java社区、JavaWeb毕业设计享有帖子相关版权
3、其他单位或个人使用、转载或引用本文时必须同时征得该帖子作者和科帮网-Java论坛、Java社区、JavaWeb毕业设计的同意
4、帖子作者须承担一切因本文发表而直接或间接导致的民事或刑事法律责任
5、本帖部分内容转载自其它媒体，但并不代表本站赞同其观点和对其真实性负责
6、如本帖侵犯到任何版权问题，请立即告知本站，本站将及时予与删除并致以最深的歉意
7、科帮网-Java论坛、Java社区、JavaWeb毕业设计管理员和版主有权不事先通知发贴者而删除本文