本文实例讲述了js实现仿阿里巴巴城市选择框效果。分享给大家供大家参考。具体分析如下：
这并不是一个城市选择插件，在这里介绍只是为了mark一下二级联动的方法，此效果适用于有二级子菜单的效果，如导航栏、城市选择、类别选择等等。
样式效果是基于阿里的样式，懒得做其他调整，在area.css中仅仅是为了修改浏览器兼容性略做了一点调整。
城市数据是通过js构造，当然也可以通过后端取得数据，不过感觉没必要。
?
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 <!doctype html> <html> <head> <meta charset="utf-8"> <script type="text/javascript" src="http://code.jquery.com/jquery-1.10.1.js"></script> <script type="text/javascript" src="area.js"></script> <link rel="stylesheet" href="area.css" type="text/css" /> <style type="text/css"> /*reset css*/ *{margin:0;padding:0;} a{text-decoration: none;} /*appearence css*/ .area{height: 32px;line-height: 32px;font-size: 12px;background-color: #f8f8f8;border: 1px solid #ccc;border-top: 2px solid #ff8033;} .area b{color: #333;margin: 0 13px 0 10px;float: left;} .def_box{display: block;float: left;background-color: #fff;padding: 0 18px 0 10px;border: 1px solid #ccc;height: 20px;margin-top: 5px;line-height: 20px;cursor: pointer;position: relative;z-index: 300;} </style> </head> <body> <div class="area"> <b>地区：</b> <span class="def_box">选择地区</span> </div> </body> </html>area.css代码如下：
?
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 .sw-ui-area-box{position:absolute;left:0px;top:20px;width:446px;padding:3px;padding-top:2px;line-height:22px;z-index:88;background:#fff;border:1px solid #b2b2b2;box-shadow:0 0 3px #a8a8a8;} .sw-ui-area-bg{position:absolute;left:0;top:0;width:100%;_padding:3px;height:100%;*height:265px;} .sw-ui-area-body{background:#fff;position:relative;z-index:2;*zoom:1;padding:0 4px;} .sw-ui-area-box-link, .sw-ui-area-box-link:link,.sw-ui-area-box-link:visited{display:block;min-width:54px;padding-left:8px;color:#333;} .sw-ui-area-box-focus, .sw-ui-area-box-link:hover{background-color:#f5f5f5;color:#333;} .sw-ui-area-box-focus{background-color:#e6e6e6!important;} .sw-ui-area-box-nfocus{color:#f77400!important;background-color:#ffebd8!important;} .sw-ui-area-box-item{float:left;list-style-type: none;margin-bottom: 4px;display: inline-block;height:22px;line-height:22px!important;} .sw-ui-area-ab-all, .sw-ui-area-abArea, .sw-ui-area-ab-prov{padding:6px 0 6px 2px;} .sw-ui-area-ab-all{position:relative;*zoom:1;z-index:20;} .sw-area-abAll-link{padding-left:8px;} .sw-ui-area-abArea{overflow:hidden;border-bottom:1px dashed #ddd;*zoom:1;} .sw-ui-area-industryDistrict-area{overflow:hidden;border-bottom:1px dashed #ddd;padding-bottom:6px;padding-top:6px;*zoom:1;} .sw-ui-area-industryDistrict{color:#CB7575;font-weight:bold;padding-top:12px;padding-left:8px;padding-bottom:0;} .sw-ui-area-abArea-item{float:left;width:60px;line-height:20px;margin-right:24px;padding:1px 0;_display:inline;} .sw-ui-area-ab-prov, .sw-ui-area-ab-prov-items{*zoom:1;} .sw-ui-area-ab-prov:after, .sw-ui-area-ab-prov-items:after{content:".";display:block;height:0;clear:both;visibility: hidden;} .sw-ui-area-abProv-im{position:relative;float:left;margin-right:24px;width:60px;padding:2px 0;_display:inline;} .sw-ui-area-abAll-nearArea{position:absolute;top:6px;left:255px;} .sw-ui-area-abAll-abpd{padding:0px;position:absolute;top:6px;left:320px;} .sw-ui-area-abAll-abpd-item{padding:0px;} .sw-ui-area-abAll-abpd-city{font-weight:700;} .sw-ui-area-ab-prov-itemLink{color:#333 !important;background:url(/static/img/filter.png) no-repeat 36px -72px;} .sw-ui-area-ab-prov-itemLink:hover{background-color:#f5f5f5;} .sw-ui-area-ab-prov-show{z-index:99;} .sw-ui-area-ab-prov-show .sw-ui-area-ab-prov-items{display:block !important;} .sw-ui-area-ab-prov-items{display:none;width:188px;position:absolute;left:0px;top:24px;background:#f8f8f8;border:1px solid #a4a4a4;padding:6px;z-index:110;} .sm-mod-currentType .sw-ui-area-ab-prov-items{left:6px;} .sw-ui-area-ab-prov-item{float:left;width:64px;overflow:hidden;padding:2px 0;} .sw-ui-area-abProv-itemsubLink{color:#333 !important;overflow:hidden;height:22px;} .sw-ui-area-abProv-itemsubLink:hover{background:#f5f5f5;color:#333 !important;}新闻热点
疑难解答
