Jquery实现仿京东商城省市联动菜单

$.each(city, function(){
$ul.append('<li><a href="javascript:void(0);" class="city">'+this+'</a></li>');
});

$tabs.children('ul').append('<li><a href="#tabs-2">市区</a></li>');
$tabs.append($div.addClass('region').append($ul));
$tabs
.tabs( "refresh" )
.tabs('option', 'active', 1)
.data('address', $this.text());
})
.on('click', '.city', function(){
var $this = $(this),
$tabs = $this.parents('.selectAddress'),
$div = $('<div id="tabs-3"></div>'),
$ul = $('<ul></ul>');

$tabs.children('ul').children(':eq(2)').remove();
$tabs.children('div:eq(2)').remove();

i++;
if(i == 1){ //判断是否有下级
$.each(county, function(){
$ul.append('<li><a href="javascript:void(0);" class="county">'+this+'</a></li>');
});

$tabs.children('ul').append('<li><a href="#tabs-3">县区</a></li>');
$tabs.append($div.addClass('region').append($ul));
$tabs
.tabs( "refresh" )
.tabs('option', 'active', 2)
.data('address', $tabs.data('address')+'/'+$this.text());
}else{
//获取值并赋值至文本框中
$('.address').val($tabs.data('address')+'/'+$this.text());
$tabs.parent().hide();
}
})
.on('click', '.county', function(){
var $this = $(this),
$tabs = $this.parents('.selectAddress');

$('.address').val($tabs.data('address')+'/'+$this.text());
$tabs.parent().hide();
})
;

$(document).bind('click', function(e){
var $target = $(e.target),
addressInfo = $('#addressInfo');
if(!$target.hasClass('selectAddress')
&& $target.parents('.selectAddress').size() == 0
&& !$target.is($('.address'))
&& addressInfo.is(':visible')){
$('#addressInfo').hide();
}
});
})
</script>
</body>
</html>

源码下载： 《Jquery实现仿京东商城省市联动菜单》

希望本文所述对大家学习javascript程序设计有所帮助。