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


Posted in Javascript onNovember 19, 2015

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

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

具体代码如下:

<!doctype html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Document</title>
 <link rel="stylesheet" href="assets/css/bootstrap.min.css">
 <link rel="stylesheet" href="css/custom-theme/jquery-ui-1.10.0.custom.css">
 <style>
 .region li{
  float: left;
  width: 15%;
  list-style: none;
  line-height: 30px;
  padding: 2px 15px;
  white-space: nowrap;
  }
 .region li a{
  text-decoration:none;
  font-size:14px;
 }
 .region li a:hover{
  background-color: #5bb75b;
 }
 </style>
</head>
<body>

 <input type="text" id="address" class="address">
 
 <div id="addressInfo" style="display: none;position: absolute;background-color: ffffff;border: 1px solid #aaaaaa;width:400px;">
 <div class="selectAddress area">
  <ul>
  <li><a href="#tabs-1">省份</a></li>
  </ul>
  <div id="tabs-1" class="region">
  <ul>
   
  </ul>
  </div>
 </div>
 </div>
 
 
 <script src="assets/js/jquery-1.9.0.min.js"></script>
 <script src="assets/js/jquery-ui-1.10.0.custom.min.js"></script>
 <script>
 $(function(){
 
  var provinces = ['北京', '天津', '山东', '河南', '河北', '山西', '湖北', '湖南', '江西', '浙江', '上海', '安徽', '广东', '广西', '福建', '宁夏', '重庆', '四川', '西藏', '海南', '香港', '澳门', '内蒙古', '陕西', '甘肃', '黑龙江', '辽宁', '吉林'];
  var city = ['广州', '深圳', '东莞'];
  var county = ['宝安', '南山', '福田', '罗湖'];
  
  $('.address').bind('focus', function(){
  var $this = $(this);
  $('#addressInfo').css({
   top: $this.offset().top + $this.outerHeight(),
   left : $this.offset().left
  }).show();
  });
  
  var $provinces_li = $('.region>ul');
  $.each(provinces, function(e){
  $provinces_li.append('<li><a href="javascript:void(0);" class="provinces">'+this+'</a></li>');
  });
  
  var i = 0;
  
  $('.area')
  .tabs()
  .on('click', '.provinces', function(){
   //获取当前对象
   var $this = $(this),
   $tabs = $this.parents('.selectAddress'), //追加DIV
   $div = $('<div id="tabs-2"></div>'),
   $ul = $('<ul></ul>'); //追加ul
   
   $tabs.children(':eq(0)').children(':gt(0)').remove();
   $tabs.children('div:gt(0)').remove();
   
   //each遍历,赋值
   //最好是这样,code、name $ul.append('<li><a href="javascript:void(0);" class="city">'+this.name+'</a><input type="hidden" value="'+this.code+'"/></li>');
   
   $.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程序设计有所帮助。

Javascript 相关文章推荐
jquery下json数组的操作实现代码
Aug 09 Javascript
jQuery中 noConflict() 方法使用
Apr 25 Javascript
解决jquery1.9不支持browser对象的问题
Nov 13 Javascript
18个非常棒的jQuery代码片段
Nov 02 Javascript
JavaScript学习笔记之ES6数组方法
Mar 25 Javascript
bootstrap datetimepicker日期插件超详细使用方法介绍
Feb 23 Javascript
基于复选框demo(分享)
Sep 27 Javascript
详解webpack 打包文件体积过大解决方案(code splitting)
Apr 10 Javascript
微信小程序上传图片实例
May 28 Javascript
vue.js实现标签页切换效果
Jun 07 Javascript
原生JS实现列表子元素顺序反转的方法分析
Jul 02 Javascript
快速搭建Node.js(Express)用户注册、登录以及授权的方法
May 09 Javascript
javascript实现二级级联菜单的简单制作
Nov 19 #Javascript
jquery通过扩展select控件实现支持enter或focus选择的方法
Nov 19 #Javascript
javascript中checkbox使用方法实例演示
Nov 19 #Javascript
jquery实现表格隔行换色效果
Nov 19 #Javascript
javascript设计简单的秒表计时器
Sep 05 #Javascript
跟我学习javascript的定时器
Nov 19 #Javascript
分享纯手写漂亮的表单验证
Nov 19 #Javascript
You might like
PHP 缓存实现代码及详细注释
2010/05/16 PHP
php中截取中文字符串的代码小结
2011/07/17 PHP
php文件夹的创建与删除方法
2015/01/24 PHP
php实现递归与无限分类的方法
2015/02/16 PHP
php基于curl实现的股票信息查询类实例
2016/11/11 PHP
jQuery封装的获取Url中的Get参数示例
2013/11/26 Javascript
JS+CSS3模拟溢出滚动效果
2016/08/12 Javascript
手机端图片缩放旋转全屏查看PhotoSwipe.js插件实现
2016/08/25 Javascript
微信小程序 form组件详解
2016/10/25 Javascript
JavaScript获取短信验证码(周期性)
2016/12/29 Javascript
ajax的分页查询示例(不刷新页面)
2017/01/11 Javascript
JSON与js对象序列化实例详解
2017/03/16 Javascript
JavaScript实现简单的双色球(实例讲解)
2017/07/31 Javascript
解决angularjs中同步执行http请求的方法
2018/08/13 Javascript
vue使用echarts图表的详细方法
2018/10/22 Javascript
纯javascript实现选择框的全选与反选功能
2019/04/08 Javascript
深入理解 JS 垃圾回收
2019/06/03 Javascript
JQuery中DOM节点的操作与访问方法实例分析
2019/12/23 jQuery
[04:42]2015国际邀请赛CDEC战队晋级之路
2015/08/13 DOTA
浅析Python编写函数装饰器
2016/03/18 Python
Django基础之Model操作步骤(介绍)
2017/05/27 Python
Python实现统计给定字符串中重复模式最高子串功能示例
2018/05/16 Python
python 图片去噪的方法示例
2019/07/09 Python
numpy 返回函数的上三角矩阵实例
2019/11/25 Python
python 非线性规划方式(scipy.optimize.minimize)
2020/02/11 Python
详解如何修改python中字典的键和值
2020/09/29 Python
SKECHERS官方旗舰店:美国舒适运动休闲品牌
2017/12/22 全球购物
《玩具柜台前的孩子》教学反思
2014/02/13 职场文书
高中生的自我评价
2014/03/04 职场文书
金融专业求职信
2014/08/05 职场文书
2014年小学语文工作总结
2014/12/20 职场文书
报名委托书
2015/01/29 职场文书
虎兄虎弟观后感
2015/06/12 职场文书
2016教师国培研修感言
2015/12/08 职场文书
Nginx进程管理和重载原理详解
2021/04/22 Servers
一篇文章告诉你如何实现Vue前端分页和后端分页
2022/02/18 Vue.js