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

本文实例讲述了Jquery实现仿京东商城省市联动菜单的简单实例代码。分享给大家供大家参考。具体如下：
运行效果截图如下：

具体代码如下：

'), $ul = $('

'); //追加ul $tabs.children(':eq(0)').children(':gt(0)').remove(); $tabs.children('div:gt(0)').remove(); //each遍历，赋值 //最好是这样，code、name $ul.append('

'+this.name+'

'); $.each(city, function(){ $ul.append('

'+this+'

'); }); $tabs.children('ul').append('

市区

'); $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 = $(''), $ul = $('

'); $tabs.children('ul').children(':eq(2)').remove(); $tabs.children('div:eq(2)').remove(); i++; if(i == 1){ //判断是否有下级 $.each(county, function(){ $ul.append('

'+this+'

'); }); $tabs.children('ul').append('

县区

'); $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(); } }); })