三级联动

插件:

<script type="text/ecmascript" src="areadata.js"></script>
<script type="text/ecmascript" src="jquery.lightbox_me.js"></script>    

1.页面元素

<div class="info_div">
<span class="real_common_t lin_height">现居住地</span>
<input type="text" class="id_card_c onfocus_inp"  id="address" name="address" value="{$dinfo.address}" placeholder="请填写地址"/>
<!--<input  name="address" value="{$data['resume']['strarea']}" id="address" type="text" placeholder="请填写地址" />-->
   <input  name="area" value="{$data['resume']['area']}" id="area" type="hidden" />
</div>

2.联动弹框

<div id="city_tc" style="display: none;">
<div class="city_tc">
<div class="tc_tt_c">
<span class="tc_fs14_tt">选择城市信息</span>
</div>
<div class="city_tab_c">
<a class="tab_nr city_now" id="province_div" href="javascript:void(0)"><em>全部</em><span class="login_icon xiala_icon"></span></a>
<a class="tab_nr" id="city_div" href="javascript:void(0)" style="display: none;"><em></em><span class="login_icon xiala_icon"></span></a>
<a class="tab_nr" id="area_div" href="javascript:void(0)" style="display: none;"><em></em><span class="login_icon xiala_icon"></span></a>
<span style="display: block; float: left; height: 31px; line-height: 31px; margin-left: 10px;" id="city_error"></span>
</div>
<div class="city_base province">
<p class="hot_city">省份</p>
<ul class="city_ul" id="province_list"> 
<div style="clear: both;"></div>
</ul>
</div>
<div class="city_base city" style="display: none;">
<ul class="city_ul" id="city_list"> 
<div style="clear: both;"></div>
</ul>
</div>
<div class="city_base area" style="display: none;">
<ul class="city_ul" id="area_list"> 
<div style="clear: both;"></div>
</ul>
</div>
<div class="tc_btn_c">
<a class="ggbtn ok_btn" href="javascript:void(0)">确认</a>
<a class="cancel_btn closed" href="javascript:void(0)">取消</a>
</div>
</div>
</div>

3.联动弹框css

.city_tc{ width: 725px; background: #fff;position: relative;z-index: 999;}
.tc_tt_c{ height: 36px; background: #ececee; padding-left: 20px;}
.tc_fs14_tt{ font-size: 14px; font-weight: bold; color: #373f4c; line-height: 36px;}
.city_tab_c{ height: 42px; background: #f9f9f9; border-bottom: 1px solid #cccccc; padding-left: 15px; padding-top: 10px;}
.tab_nr{ display: block; float: left; height: 31px; color: #38404b; padding: 0px 5px 0px 12px; line-height: 31px; border: 1px solid #cccccc; border-bottom: 0px; margin-left: 12px;}
.xiala_icon{ display: inline-block; background-position: -212px -9px; width: 12px; height: 6px; margin-left: 5px;}
.city_now{ background: #FFF; height: 32px;}
.city_ul{ display: block; padding: 15px 40px;}
.city_ul li{ float:  left; width: 100px; text-align: center; margin-right: 7px; margin-bottom: 10px;}
.city_a{ padding: 5px 10px; display: inline-block; font-size: 14px; color: #3a6a88;}
.city_a:hover{ background: #4298d1; color: #fff;}
.city_a_c{ background: #4298d1; color: #fff;}
.hot_city{ padding-top: 20px; font-size: 14px; color: #38404b; padding-left: 50px;}
.tc_btn_c{ text-align: center; height: 60px; background: #f9f9f9; padding-top: 20px;}
.ok_btn{ padding: 0px 22px; margin-right: 20px; display: inline-block; height: 30px; line-height: 30px; font-size: 14px;}
.cancel_btn{  display: inline-block; height: 30px; line-height: 30px; color: #666666; font-size: 14px; border: 1px solid #8a8a8a; border-radius: 3px; padding: 0px 22px;background: #ffffff;}
.city_base{background:#fff; display: block; padding-bottom: 30px;}


.editor_comp3{width: 760px;height: auto;margin-top: 5px;display: inline-block;}
.editor_coma{float: left;margin-right: 10px;width: 98px;height: 26px;position: relative;border: #00a78e solid 1px;margin-bottom: 10px;border-radius: 3px;}
.editor_comi{color: #00a78e;float: left;font-family: "宋体";width: 73px;height: 25px;overflow: hidden;font-size: 12px;line-height: 25px;padding: 0px 12px;border-right: #00a78e solid 1px;}
.editor_coma1 {float: left;position: absolute;right: 5px;width: 12px;height: 12px;top: 4px;cursor: pointer;color: #00a78e;}
.pricei,.shopnamei,.htypei,.platformi,.lineinfoi{float: left;}
.lineinfoi{margin:0px 5px;}

4.三级联动js

<script type="text/javascript">
(function($){
$('.cancel_btn').click(function(){
$(this).parents('.tip_alertbginfo').hide();
})
function AreaChoose(){
$('.city_a').click(function(){
$(this).parents('.city_ul').find('.city_a').removeClass('city_a_c');
$(this).addClass('city_a_c');
$('#city_error').html('');
}) 
}
//点击取消按钮
$('.closed').click(function(){
$('.js_lb_overlay').hide();
$('#city_tc').hide();
});

$('#address').click(function(e) {
        $("#city_tc").lightbox_me({
        centered: true,
        preventScroll: true,
        onLoad: function() {
$('.province .city_a').click(function(){
$('#city_div,#area_div').hide();
var city=$(this).html();
var _key = $(this).attr('data-key');
$('#city_div em').html(city);
$('#city_div').show().addClass('city_now').siblings('.tab_nr').removeClass('city_now');
$('.city').show().siblings('.city_base').hide(); 
getCityList(_key);
$('.city .city_a').click(function(){
var area=$(this).html();
var _key = $(this).attr('data-key');
$('#area_div em').html(area);
$('#area_div').show().addClass('city_now').siblings('.tab_nr').removeClass('city_now');
$('.area').show().siblings('.city_base').hide();
getAreaList(_key);
AreaChoose(); 
})
AreaChoose(); 
})
   AreaChoose();
$('#province_div').click(function(){
$(this).addClass('city_now').siblings('.tab_nr').removeClass('city_now');
$('.province').show().siblings('.city_base').hide();
})
$('#city_div').click(function(){
$(this).addClass('city_now').siblings('.tab_nr').removeClass('city_now');
$('.city').show().siblings('.city_base').hide();
})
$('#area_div').click(function(){
$(this).addClass('city_now').siblings('.tab_nr').removeClass('city_now');
$('.area').show().siblings('.city_base').hide();
})
$('.ok_btn').click(function(){
var province=$('#province_list .city_a_c').html();
var city=$('#city_list .city_a_c').html();
var area=$('#area_list .city_a_c').html();
var addresskey=$('#area_list .city_a_c').attr('data-key');
var addresskey1=$('#city_list .city_a_c').attr('data-key');
if(province!=null && city!=null ){
if(addresskey){
$('#address').val(province+'-'+city+'-'+area);
$('#area').val(addresskey);
}
else {
$('#address').val(province+'-'+city);
$('#area').val(addresskey1);
} 
$('#city_tc').trigger('close');
var len=$('#address').parent().find('span.remind_pic').length;
if(len<=0){
$('#address').parent().append('<span class="remind_pic"><em class="pic_right"></em></span>');
}
}
else{
$('#address').val('');
$('#city_error').css('color','#EE4D4D').html('请选择详细地址');
return false;
}
})
}
        });
        e.preventDefault();
    });
   var _list = _area_data.list;
var _category = _area_data.category;
var _relations =  _area_data.relations;  
var _provinces =  _category.provinces;
function getProvince(){
for(var provinces in _provinces ){
var _p = _provinces[provinces]; 
$("#province_list").append('<li><a class="city_a" href="javascript:void(0)" data-key="'+_p+'">'+_list[_p][0]+'</a></li>');  
}
$("#province_list").append('<div style="clear: both;"></div>'); 
}
getProvince();

function getCityList(prov_id){  
$("#city_list").html('');
for(var relations in _relations[prov_id] ){ 
var _p = _relations[prov_id][relations];
$("#city_list").append('<li><a class="city_a" href="javascript:void(0)" data-key="'+_p+'">'+_list[_p][0]+'</a></li>');  
}
$("#city_list").append('<div style="clear: both;"></div>');  
}

function getAreaList(area_id){  
$("#area_list").html('');
for(var relations in _relations[area_id] ){ 
var _p = _relations[area_id][relations];
$("#area_list").append('<li><a class="city_a" href="javascript:void(0)" data-key="'+_p+'">'+_list[_p][0]+'</a></li>');  
}
$("#area_list").append('<div style="clear: both;"></div>');  
}
})(jQuery);


</script>