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 相关文章推荐
Javascript 通过json自动生成Dom的代码
Apr 01 Javascript
js constructor的实际作用分析
Nov 15 Javascript
动态加载iframe时get请求传递中文参数乱码解决方法
May 07 Javascript
JavaScript实现网站访问次数统计代码
Aug 12 Javascript
详解jQuery向动态生成的内容添加事件响应jQuery live()方法
Nov 02 Javascript
Node.js的Mongodb使用实例
Dec 30 Javascript
Node.js调试技术总结分享
Mar 12 Javascript
整理关于Bootstrap列表组的慕课笔记
Mar 29 Javascript
vue-cli 引入、配置axios的方法
May 08 Javascript
JavaScript中this的全面解析及常见实例
May 14 Javascript
Node.js 的 GC 机制详解
Jun 03 Javascript
Electron+vue从零开始打造一个本地播放器的方法示例
Oct 27 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
ThinkPHP3.1新特性之字段合法性检测详解
2014/06/19 PHP
PHP实现带重试功能的curl连接示例
2016/07/28 PHP
PHP正则判断一个变量是否为正整数的方法
2019/02/27 PHP
安装docker和docker-compose实例详解
2019/07/30 PHP
jquery 之 $().hover(func1, funct2)使用方法
2012/06/14 Javascript
关于jQuery UI 使用心得及技巧
2012/10/10 Javascript
js实现仿网易点击弹出提示同时背景变暗效果
2015/08/13 Javascript
js中对函数设置默认参数值的3种方法
2015/10/23 Javascript
跟我学习JScript的Bug与内存管理
2015/11/18 Javascript
Bootstrap每天必学之折叠(Collapse)插件
2016/04/25 Javascript
vueJS简单的点击显示与隐藏的效果【实现代码】
2016/05/03 Javascript
JavaScript核心语法总结(推荐)
2016/06/02 Javascript
JAVA Web实时消息后台服务器推送技术---GoEasy
2016/11/04 Javascript
解决给dom元素绑定click等事件无效问题的方法
2017/02/17 Javascript
JS jQuery使用正则表达式去空字符的简单实现代码
2017/05/20 jQuery
用angular实现多选按钮的全选与反选实例代码
2017/05/23 Javascript
Angular实现下载安装包的功能代码分享
2017/09/05 Javascript
vue源码入口文件分析(推荐)
2018/01/30 Javascript
vue2.0之多页面的开发的示例
2018/01/30 Javascript
Node.js使用MySQL连接池的方法实例
2018/02/11 Javascript
react router4+redux实现路由权限控制的方法
2018/05/03 Javascript
详解react内联样式使用webpack将px转rem
2018/09/13 Javascript
vue中使用codemirror的实例详解
2018/11/01 Javascript
JavaScript 点击触发复制功能实例详解
2018/11/02 Javascript
javascript设计模式之装饰者模式
2020/01/30 Javascript
jQuery开发仿QQ版音乐播放器
2020/07/10 jQuery
python write无法写入文件的解决方法
2019/01/23 Python
python 如何去除字符串头尾的多余符号
2019/11/19 Python
Python解释器以及PyCharm的安装教程图文详解
2020/02/26 Python
python中yield的用法详解
2021/01/13 Python
面试后感谢信
2014/02/01 职场文书
超市收银员岗位职责
2015/04/07 职场文书
2015年员工工作总结范文
2015/04/08 职场文书
2016新教师培训心得体会范文
2016/01/08 职场文书
golang内置函数len的小技巧
2021/07/25 Golang
Java网络编程之UDP实现原理解析
2021/09/04 Java/Android