Jquery模仿JD.COM商城实现省市联动菜单

本文描述了一个简单的Jquery示例代码，实现了模拟JD.COM商城的省市联动菜单。分享给大家参考。具体如下：运行效果截图如下：

具体代码如下：

！doctype html html lang=' en ' head meta charset=' UTF-8 ' title document/title link rel='样式表href=' assets/CSS/bootstrap。量滴CSS ' link rel='样式表href=' CSS/custom-theme/jquery-ui-1。10 .0 .定制。' CSS '样式。区域li{左侧浮动：宽度： 15%;列表样式：无；线高： 30pxpadd : 2px 15px空白： nowrap} .阿利地区；font-size :14 px} .区域阿利：悬停{底色： # 5bb 75b}/样式/床头柜输入类型=' text ' id=' address ' class=' address ' div id=' address info ' style=' display : none；绝对位置：背景色： ffffffborder: 1px实心# AAA宽度width :400 pxdiv class=' selectAddress area ' ul lia href=' # tab-1 '省份/a/Li/ul div id=' tab-1 ' class=' region ' ul/ul/div/div/div脚本src=' http : assets/js/jquery-1。9 .0 .量滴js '/script script src=' http : assets/js/jquery-ui-1。10 .0 .定制。量滴js '/script script $(function(){ var省份=['北京', '天津', '山东', '河南', '河北', '山西', '湖北', '湖南', '江西', '浙江', '上海', '安徽', '广东', '广西', '福建', '宁夏', '重庆', '四川', '西藏', '海南', '香港', '澳门', '内蒙古', '陕西', '甘肃', '黑龙江', '辽宁', '吉林'];var city=['广州', '深圳', '东莞'];var county=['宝安', '南山', '福田', '罗湖'];$('.地址')。bind('focus '，function(){ var $ this=$(this)；$('#addressInfo ').css({ top: $this.offset().这个最高价。ExternaL()，left : $this.offset().左})。show()；});var $省份_li=$(' .区域’)；$.每个（省份，函数{ $省份_李。追加(' lia href=' JavaScript : void(0)；'类='省份''本/a/李'；});var I=0；$('.区域')。选项卡()。打开('点击','。'省份，函数(){ //获取当前对象var $this=$(this)，$ tabs=$ this.parents(' .选择地址'),//追加DIV $ DIV=$(' DIV id=' tab-2 '/DIV ')，$ ul=$(' ul/ul ')；//追加ul $标签。儿童(' : eq(0)').子代(' :gt(0)').移除();$ tab。儿童(' div : gt(0)').移除();//每个遍历，赋值//最好是这样，代码、名称$ ul。追加(' lia href=' JavaScript : void(0)；这个城市。name/代码' '//Li’)；$.每个(城市，功能(){ $ ul。追加(' lia href=' JavaScript : void(0)；'class=' city ' ' this '/a/Li ')；});$ tab。儿童.追加(' lia href=' # tabs '市区/a/李；$ tab。追加($ div。addCLaSS(' region ').追加($ ul))；$制表符.制表符('刷新')。制表符('选项','活动',1)。数据(' address '，$ this。text())；}) .打开('点击','。city '，function(){ var $this=$(this)，$ tabs=$ this.parents ' .selectAddress ')，$ div=$(' div id=' tab-3 '/div ')，$ ul=$(' ul/ul ')；$ tab。儿童.儿童(' :eq(2)').移除();$ tab。儿童(' div : eq(2)').移除();我；if(i==1){ //判断是否有下级$.每个（郡，函数(){ $ ul。追加(' lia href=' JavaScript : void(0)；'class=' county ' ' this '/a/Li ')；});$ tab。儿童.追加(' lia href=' # tabs '县区/a/李；$ tab。追加($ div。addCLaSS(' region ').追加($ ul))；$制表符.制表符('刷新')。制表符('选项','活动',2)。数据('地址'，$ tab)。数据('地址')'/' $ this。text())；}else{ //获取值并赋值至文本框中$('.地址')。val($ tab)。数据('地址')/' $ this。text())；$ tabs.parent().hide()；} }) .打开('点击','。'' county '，function(){ var $this=$(this)，$ tabs=$ this.parents ' .选择地址');$('.地址')。val($ tab)。数据('地址')/' $ this。text())；$ tabs.parent().hide()；}) ;$(文档)。bind('click '，function(e){ var $ target=$(e . target)，address info=$(' # address info ')；if(！$目标。有类(' selectAddress ')$ target。父母.选择地址')。size()==0！$target.is($(').地址'))地址信息。是(' :可见'){ $(' #地址信息').hide()；} });})/脚本/正文/html源码下载： 《Jquery实现仿京东商城省市联动菜单》

希望这篇文章对大家学习javascript编程有所帮助。