jquery实现pc端城市多选单选弹出框选择器效果代码
代码语言：html
所属分类：选择器
代码描述：jquery实现pc端城市多选单选弹出框选择器效果代码
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style>
@charset "utf-8";
/*行业*/
.aui_state_box {
font: 12px/1.5 Tahoma
}
.aui_state_box {
width: 0px;
height: 0px;
position: fixed;
left: 50%;
top: 0px;
z-index: 99999;
}
.aui_state_box_bg {
width: 100%;
height: 100%;
background: #000;
position: fixed;
left: 0px;
top: 0px;
opacity: 0.6
}
.aui_alert_zn {
position: relative;
background: #FFF
}
.aui_alert_zn li {
list-style-type: none;
font: 12px/1.5 宋体,Arial,sans-serif;
}
.aui_alert_zn a {
text-decoration: none;
color: #0077b3;
}
.aui_alert {
font: 12px/1.5 宋体,Arial,sans-serif;
position: absolute;
margin: 0px auto;
}
.aui_outer {
text-align: left;
position: absolute;
left: -452px;
top: 60px;
}
.aui_alert a {
color: #0077b3;
text-decoration: none;
}
.aui_alert table {
border-collapse: collapse;
border-spacing: 0
}
.aui_header {
background: #FFF;
}
table.aui_border, table.aui_dialog {
border: 0;
margin: 0;
border-collapse: collapse;
width: auto
}
.aui_footer, .aui_header, .aui_main {
padding: 0
}
.aui_header {
font: 12px/1.11 Tahoma, Arial, Helvetica;
border-bottom: 1px solid #eee
}
.aui_title {
overflow: hidden;
text-overflow: ellipsis;
}
.aui_close {
display: block;
position: absolute;
text-decoration: none;
outline: 0
}
.aui_close:hover {
text-decoration: none
}
.aui_main {
text-align: left;
min-width: 9em;
min-width: 0\9
}
.aui_content {
display: inline-block;
text-align: left;
border: none 0;
vertical-align: middle
}
.aui_content .timer {
text-align: center;
color: red
}
.aui_icon {
vertical-align: top
}
.aui_icon div {
width: 48px;
position: relative;
height: 48px;
margin: 20px -15px 10px 10px;
background-position: center center;
background-repeat: no-repeat
}
.aui_buttons {
padding: 0px 20px;
text-align: center;
background-color: #FFF
}
.aui_buttons a, .aui_buttons button {
margin: 0 10px 10px 0;
}
.aui_inner {
background: #FFF
}
.aui_titleBar {
width: 100%;
height: 45px;
line-height: 45px;
margin-top: 5px;
bottom: 30px;
z-index: 1
}
.aui_title {
font-size: 16px;
height: 45px;
line-height: 45px;
padding: 0 15px 0 15px;
color: #000;
font-weight: 400
}
.aui_close {
background-image: url(//repo.bfw.wiki/bfwrepo/icon/5ffd0e43aeff2.png);
background-repeat: no-repeat
}
.aui_close {
top: 15px;
right: 8px;
width: 25px;
height:25px;
background-size: cover;
text-indent: -9999em;
overflow: hidden
}
.aui_close:hover {
}
.aui-btn {
display: inline-block;
padding: 5px 12px;
font-size: 14px;
line-height: 18px;
color: #333;
text-align: center;
vertical-align: middle;
cursor: pointer;
background: #f5f5f5;
border: 1px solid #ccc;
-webkit-border-radius: 2px;
-moz-border-radius: 2px;
border-radius: 2px;
overflow: visible
}
.aui-btn-disabled, .aui-btn:active, .aui-btn:focus, .aui-btn:hover, .aui-btn[disabled] {
color: #333;
background: #e6e6e6
}
.aui-btn:active {
background: #ccc \9
}
.aui-btn:focus, .aui-btn:hover {
color: #333;
text-decoration: none;
}
.aui-btn:focus {
outline: thin dotted #333;
outline: 5px auto -webkit-focus-ring-color;
outline-offset: -2px
}
.aui-btn.active {
background-image: none;
outline: 0
}
.aui-btn-primary {
float: right;
color: #fff;
background: #3d9ccc;
border: 1px #3c98c7 solid;
}
.aui-btn-primary.active, .aui-btn-primary.disabled, .aui-btn-primary:focus, .aui-btn-primary:hover, .aui-btn-primary[disabled] {
color: #fff;
background: #3689b3
}
.aui-btn-primary.active {
background: #3d9ccc
}
.aui-btn-light {
float: right;
color: #3d9ccc;
background: #fff;
border: 1px #d2edfa solid;
}
.aui-btn-light.active, .aui-btn-light.disabled, .aui-btn-light:active, .aui-btn-light:focus, .aui-btn-light:hover, .aui-btn-light[disabled] {
color: #00528c;
background: #f5f9ff
}
.view-all .clearfix:after {
visibility: hidden;
display: block;
font-size: 0;
content: " ";
clear: both;
height: 0;
}
.view-all .clearfix {
*zoom: 1;
}
.view-all .clearfix {
padding-left: 10px
}
.data-error {
display: none;
top: 10px;
right: 10px;
padding: 3px 15px;
color: #b94a48;
border-color: #eed3d7;
background-color: #f2dede;
border-radius: 3px;
position: absolute;
font-size: 12px;
}
.data-result {
background-color: #FFF;
line-height: 32px;
padding: 10px 34px;
font-size: 12px;
}
.data-result em {
color: #678;
margin-right: 10px;
display: inline-block;
vertical-align: middle;
font-style: italic;
}
.data-result span {
display: inline-block;
vertical-align: middle;
background-color: #5297cc;
border-radius: 15px;
padding: 0 14px 2px;
color: #fff;
margin: 0px 5px 2px 0;
line-height: 26px;
white-space: nowrap;
}
.data-result span i {
display: inline-block;
margin-left: 5px;
color: #a9cbe6;
font-size: 18px;
cursor: pointer;
vertical-align: bottom;
*vertical-align: middle;
margin-left: 5px;
margin-right: -5px;
font-style: normal;
}
.data-result span i:hover {
color: #fff;
}
.data-tabs {
background-color: #FFF;
}
.data-tabs ul {
*zoom: 1;
padding: 0 34px;
margin: 0
}
.data-tabs ul:after {
visibility: hidden;
display: block;
font-size: 0;
content: " ";
clear: both;
height: 0;
}
.data-tabs ul li {
float: left;
position: relative;
border-width: 1px 1px 0 1px;
border-color: #d9d9d9;
border-style: solid;
line-height: 29px;
margin-right: -1px;
border-radius: 2px;
}
.data-tabs ul li a {
display: block;
padding: 0 15px;
color: #333;
}
.data-tabs ul li a em {
display: inline-block;
vertical-align: middle;
width: 12px;
height: 6px;
overflow: hidden;
margin-left: 15px;
margin-right: -5px;
}
.data-tabs ul li a:hover, .data-tabs ul li a:active, .data-tabs ul li a:focus {
color: #333;
text-decoration: none;
}
.data-tabs ul li.active {
padding-bottom: 1px;
margin-bottom: -1px;
background-color: #fcfcfc;
}
.data-title {
margin-left: 25px;
font-size: 12px;
font-weight: bold
}
.data-container {
margin-left: 34px;
margin-right: 34px;
min-height: 350px;
display: none;
padding-left: 0
}
.data-container a.d-item {
line-height: 30px;
padding: 0 10px;
display: inline-block;
vertical-align: middle;
white-space: nowrap;
}
.data-container a.d-item:hover, .data-container a.d-item:active, .data-container a.d-item:focus {
text-decoration: none;
}
.data-container a.d-item:hover {
background-color: #d5e9f2;
}
.data-container a.d-item:focus {
outline: none;
}
.data-container a.d-item-active, .data-container a.d-item-active:hover {
color: #fff;
background-color: #3d9ccc;
}
.data-container .view-all {
overflow: hidden;
}
.data-container-city {
display: block;
background-color: #fcfcfc;
border: 1px solid #e5e5e5;
margin: 0 34px 18px;
padding: 14px 0;
border-radius: 2px
}
.data-container-city .clearfix {
padding-left: 10px
}
.data-container.data-container-city ul li {
float: left;
margin-bottom: 1px;
overflow-x: hidden;
text-overflow: ellipsis;
width: 100px;
}
.data-container.data-container-city a.d-item label {
background-color: #5297cc;
color: #fff;
display: none;
font-family: Arial;
line-height: 16px;
margin-left: 4px;
padding: 0 4px;
}
.li-disabled {
cursor: not-allowed;
color: #ccc;
}
.li-disabled a {
color: #ccc;
}
.data-search {
float: right;
margin-right: 34px;
}
.data-search input {
line-height: 26px;
height: 26px;
}
.data-search .run {
border: 1px solid #d9d9d9;
width: 200px;
}
.data-search .searchList {
display: none;
background: #F8F8FF;
position: absolute;
z-index: 100;
border: 1px solid #d9d9d9;
}
.data-search .searchList em {
float: right;
font-style: normal;
}
.area_menu {
display: block;
padding: 2px 3px
}
.data-search a:hover {
color: #3f9ffc;
}
</style>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/jquery-3.2.1.min.js"></script>
<script type="text/javascript">
var __LocalDataCities = {
list: {
"010": ["北京",
"BEIJING",
"BJ"],
"010010010": ["东城区",
"DONGCHENG",
"DCQ"],
"010010020": ["西城区",
"XICHENG",
"XCQ"],
"010010030": ["朝阳区",
"CHAOYANG",
"CYQ"],
"010010050": ["海淀区",
"HAIDIAN",
"HDN"],
"010010070": ["石景山",
"SHIJINGSHAN",
"SJS"],
"010010080": ["门头沟",
"MENTOUGOU",
"MTG"],
"010010090": ["丰台区",
"FENGTAI",
"FTQ"],
"010010100": ["房山区",
"FANGSHAN",
"FSQ"],
"010010110": ["大兴区",
"DAXING",
"DXQ"],
"010010120": ["通州区",
"TONGZHOU",
"TZQ"],
"010010130": ["顺义区",
"SHUNYI",
"SYI"],
"010010140": ["平谷区",
"PINGGU",
"PGU"],
"010010150": ["昌平区",
"CHANGPING",
"CPX"],
"010010160": ["怀柔区",
"HUAIROU",
"HRX"],
"010010170": ["延庆县",
"YANQING",
"YQX"],
"010010180": ["密云县",
"MIYUN",
"MYN"],
"020": ["上海",
"SHANGHAI",
"SH"],
"020010010": ["浦东新区",
"PUDONGXINQU",
"PDX"],
"020010020": ["徐汇区",
"XUHUI",
"XHI"],
"020010030": ["长宁区",
"CHANGNING",
""],
"020010040": ["普陀区",
"PUTUO",
"PTO"],
"020010050": ["闸北区",
"ZHABEI",
"ZBE"],
"020010060": ["虹口区",
"HONGKOU",
"HKQ"],
"020010070": ["杨浦区",
"YANGPU",
"YPU"],
"020010080": ["黄浦区",
"HUANGPU",
"HGP"],
"020010100": ["静安区",
"JINGAN",
"JAQ"],
"020010110": ["宝山区",
"BAOSHAN",
"BAO"],
"020010120": ["闵行区",
"MINHANG",
"MHQ"],
"020010130": ["嘉定区",
"JIADING",
"JDG"],
"020010140": ["金山区",
"JINSHAN",
""],
"020010150": ["松江区",
"SONGJIANG",
"SOJ"],
"020010160": ["青浦区",
"QINGPU",
"QPU"],
"020010180": ["奉贤区",
"FENGXIAN",
"FXI"],
"020010190": ["崇明县",
"CHONGMING",
"CMI"],
"030": ["天津",
"TIANJIN",
"TJ"],
"030010010": ["和平区",
"HEPING",
"HPQ"],
"030010020": ["河东区",
"HEDONG",
"HDL"],
"030010030": ["河西区",
"HEXI",
"HXQ"],
"030010040": ["南开区",
"NANKAI",
"NKQ"],
"030010050": ["河北区",
"HEBEI",
"HBQ"],
"030010060": ["红桥区",
"HONGQIAO",
"HQO"],
"030010070": ["塘沽区",
"TANGKU",
"TGA"],
"030010080": ["汉沽区",
"HANKU",
"HGQ"],
"030010090": ["大港区",
"DAGANG",
"DGJ"],
"030010100": ["东丽区",
"DONGLI",
"DLI"],
"030010110": ["西青区",
"XIQING",
"XQG"],
"030010120": ["津南区",
"JINNAN",
"JNQ"],
"030010130": ["北辰区",
"BEICHEN",
"BCQ"],
"030010140": ["武清区",
"WUQING",
"WQX"],
"030010150": ["宝坻区",
"BAODI",
"BDI"],
"030010160": ["宁河县",
"NINGHE",
"NHE"],
"030010170": ["静海县",
"JINGHAI",
"JHT"],
"030010180": ["蓟 县",
"JIXIAN",
"JXI"],
"030010200": ["开发区",
"JINGJIKAIFAQU",
"KFQ"],
"030010210": ["滨海区",
"BINHAIXINQU",
"BHI"],
"040": ["重庆",
"CHONGQING",
"CQ"],
"040010010": ["渝中区",
"YUZHONG",
"YZQ"],
"040010020": ["江北区",
"JIANGBEI",
"JBE"],
"040010030": ["南岸区",
"NANAN",
"NAQ"],
"040010040": ["沙坪坝",
"SHAPINGVA",
"SPB"],
"040010050": ["九龙坡",
"JIULONGPO",
"JLP"],
"040010060": ["大渡口",
"DADUKOU",
"DDK"],
"040010070": ["北碚区",
"BEIBEI",
"BBE"],
"040010080": ["巴南区",
"BANAN",
"BNN"],
"040010090": ["渝北区",
"YUBEI",
"YBE"],
"040010100": ["永川区",
"YONGCHUAN",
"YCP"],
"040010110": ["涪陵区",
"FULING",
"FLG"],
"040010120": ["合川区",
"HECHUAN",
"HEC"],
"040010130": ["江津区",
"JIANGJIN",
"JJY"],
"040010140": ["长寿区",
"CHANGSHOU",
"CSO"],
"040010170": ["南川区",
"NANCHUAN",
"NCU"],
"040010180": ["万州区",
"WANZHOU",
"WZO"],
"040010190": ["黔江区",
"QIANJIANG",
"QJX"],
"040010200": ["綦江区",
"QIJIANG",
"QJG"],
"040010210": ["潼南县",
"TONGNANXIAN",
"TNN"],
"040010220": ["铜梁区",
"TONGLIANG",
"TGL"],
"040010230": ["大足区",
"DAZU",
"DZX"],
"040010240": ["荣昌县",
"RONGCHANGXIAN",
"RGC"],
"040010250": ["璧山区",
"BISHAN",
"BSY"],
"040010260": ["垫江县",
"DIANJIANGXIAN",
"DJG"],
"040010270": ["武隆县",
"WULONGXIAN",
"WLG"],
"040010280": ["丰都县",
"FENGDOUXIAN",
"FDU"],
"040010290": ["城口县",
"CHENGKOUXIAN",
"CKO"],
"040010300": ["梁平县",
"LIANGPINGXIAN",
"LGP"],
"040010310": ["开县",
"KAIXIAN",
"KAI"],
"040010320": ["巫溪县",
"WUXIXIAN",
"WXX"],
"040010330": ["巫山县",
"WUSHANXIAN",
"WSN"],
"040010340": ["奉节县",
"FENGJIEXIAN",
"FJE"],
"040010350": ["云阳县",
"YUNYANGXIAN",
"YNY"],
"040010360": ["忠县",
"ZHONGXIAN",
"ZHX"],
"040010370": ["石柱",
"SHIZHU",
"SZY"],
"040010380": ["彭水县",
"PENGSHUI",
"PSU"],
"040010390": ["酉阳县",
"YOUYANG",
"YUY"],
"040010410": ["石柱县",
"SHIZHUTUJIAZUZIZHIXIAN",
"SZY"],
"040010420": ["秀山县",
"XIUSHAN",
"XUS"],
"050": ["广东省",
"GUANGDONG",
"GD"],
"050020": ["广州",
"GUANGZHOU",
"CAN"],
"050020010": ["白云区",
"BAIYUN",
""],
"050020020": ["天河区",
"TIANHE",
"THQ"],
"050020030": ["越秀区",
"YUEXIU",
"YXU"],
"050020040": ["海珠区",
"ZHUHAI",
"HZU"],
"050020050": ["黄埔区",
"HUANGPU",
"HPU"],
"050020060": ["荔湾区",
"LIWAN",
"LWQ"],
"050020070": ["番禺区",
"FANYU",
"PNY"],
"050020080": ["花都区",
"HUADU",
"HDU"],
"050020090": ["萝岗区",
"LUOGANG",
""],
"050020100": ["南沙区",
"NANSHA",
"NSA"],
"050020110": ["从化区",
"CONGHUA",
"CNH"],
"050020120": ["增城区",
"ZENGCHENG",
"ZEC"],
"050030": ["潮州",
"CHAOZHOU",
"CZY"],
"050040": ["东莞",
"DONGGUAN",
"DGG"],
"050040010": ["南城区",
"NANCHENGQU",
"NCE"],
"050040020": ["东城区",
"DONGCHENGQU",
"DCQ"],
"050040030": ["万江区",
"WANJIANGQU",
""],
"050040040": ["莞城区",
"WANCHENGQU",
""],
"050040050": ["石龙镇",
"SHILONGZHEN",
"SIL"],
"050040060": ["虎门镇",
"HUMENZHEN",
""],
"050040070": ["麻涌镇",
"MAYONGZHEN",
""],
"050040080": ["道滘镇",
"DAOJIAOZHEN",
""],
"050040090": ["石碣镇",
"SHIJIEZHEN",
""],
"050040100": ["沙田镇",
"SHATIANZHEN",
""],
"050040110": ["望牛墩",
"WANGNIUDUNZHEN",
""],
"050040120": ["洪梅镇",
"HONGMEIZHEN",
""],
"050040130": ["茶山镇",
"CHASHANZHEN",
""],
"050040140": ["寮步镇",
"LIAOBUZHEN",
""],
"050040150": ["大岭山",
"DALINGSHANZHEN",
""],
"050040160": ["大朗镇",
"DALANGZHEN",
""],
"050040170": ["黄江镇",
"HUANGJIANGZHEN",
""],
"050040180": ["樟木头",
"ZHANGMUTOUZHEN",
""],
"050040190": ["凤岗镇",
"FENGGANGZHEN",
""],
"050040200": ["塘厦镇",
"TANGXIAZHEN",
""],
"050040210": ["谢岗镇",
"XIEGANGZHEN",
""],
"050040220": ["厚街镇",
"HOUJIEZHEN",
""],
"050040230": ["清溪镇",
"QINGXIZHEN",
""],
"050040240": ["常平镇",
"CHANGPINGZHEN",
""],
"050040250": ["桥头镇",
"QIAOTOUZHEN",
""],
"050040260": ["横沥镇",
"HENGLIZHEN",
""],
"050040270": ["东坑镇",
"DONGKENGZHEN",
""],
"050040280": ["企石镇",
"QISHIZHEN",
""],
&q.........完整代码请登录后点击上方下载按钮下载查看
热门代码搜索
其他语言代码库
Html代码库
Python代码库
Java代码库
Php代码库
Phpcli代码库
Golang代码库
C#代码库
Nodejs代码库
C代码库
C++代码库
Sql代码库
R代码库
Rust代码库
Ruby代码库
Dart代码库
Vb代码库
D代码库
F#代码库
Typescript代码库
Coffeescript代码库
Julia代码库
Kotlin代码库
Perl代码库
Groovy代码库
Lua代码库
Vala代码库
Ocaml代码库
Assembly代码库
Objectc代码库
Scala代码库
Erlang代码库
Pascal代码库
Swift代码库
Fortran代码库
Bash代码库
Clojure代码库
Ada代码库
Elixir代码库
Cobol代码库
Haskell代码库
Nim代码库
Racket代码库
Lisp代码库
网友评论0