地区选择.jpg
<div class="regional">
<label>地区选择：</label>
<div class="pro">
<div class="pro_title">省/自治区/直辖市</div>
<div class="proContent">
<ul>
</ul>
</div>
</div>
<div class="city">
<div class="city_title">城市</div>
<div class="cityContent">
<ul>
</ul>
</div>
</div>
<div class="reg_select">
<div class="select_title">已选择<span class="forLinkColor">清空</span></div>
<div class="selContent">
</div>
</div>
</div>
.regional label {
width: 70px;
display: inline-block;
}
.pro {
border-top-left-radius: 3px;
border-bottom-left-radius: 3px;
border: 1px solid #e8e8e9;
border-right: 0;
}
.city {
border-top-right-radius: 3px;
border-bottom-right-radius: 3px;
border: 1px solid #e8e8e9;
margin-left: -4px;
margin-right: 20px;
}
.pro_title,
.city_title,
.select_title,
.group_title {
padding-left: 10px;
line-height: 32px;
border-bottom: 1px solid #e8e8e9;
}
.proContent,
.cityContent,
.selContent,
.groupContent {
height: 292px;
overflow: hidden;
overflow-y: auto;
}
.proContent li,
.cityContent li,
.groupContent li {
line-height: 32px;
padding-left: 10px;
cursor: pointer;
display: flex;
align-items: center;
}
.proContent li:hover,
.cityContent li:hover,
.groupContent li:hover,
.proContent li.active,
.cityContent li.active {
background: #edf4ff;
}
.reg_select,
.group_select,
.group_select2 {
border: 1px solid #e8e8e9;
border-radius: 3px;
}
.select_title span {
float: right;
margin-right: 10px;
cursor: pointer;
}
.selectsDiv {
border-bottom: 1px solid #e8e8e9;
margin: 5px 10px 10px;
}
.selectsDiv:last-child {
border: 0;
}
.selectsDiv .cityDiv {
border-radius: 3px;
text-indent: 6px;
line-height: 28px;
margin-top: 3px;
margin-bottom: 10px;
display: flex;
align-items: center;
justify-content: space-between;
background: #f2f5f9;
}
.selectsDiv .cityDiv i,
.groupSelDiv i {
display: inline-block;
width: 9px;
height: 8px;
background: url(../../images/settings_images.png) -14px -297px no-repeat;
cursor: pointer;
margin-right: 5px;
}
.selectsDiv .cityDiv i:hover,
.groupSelDiv i:hover {
background: url(../../images/settings_images.png) -30px -297px no-repeat;
}
.pro,
.city,
.reg_select,
.group_select {
display: inline-block;
vertical-align: top;
width: 215px;
height: 324px;
}
.cityName {
margin-left: 8px;
}
var allarray = new Array();
var regional;
var groups = new Array();
//全部的省、市
var areadata = [{
name: "北京市",
procode: "11",
cities: ["北京市"],
codes: ["110100"]
},
{
name: "天津市",
procode: "12",
cities: ["天津市"],
codes: ["120100"]
},
{
name: "河北省",
procode: "13",
cities: ["石家庄市", "秦皇岛市", "廊坊市", "保定市", "邯郸市", "唐山市", "邢台市", "衡水市", "张家口市", "承德市", "沧州市", "河北省直辖县级行政区划"],
codes: ["130100", "130300", "130000", "130600", "130400", "130200", "130500", "131100", "130700", "130800", "130900", "139000"]
},
{
name: "山西省",
procode: "14",
cities: ["太原市", "大同市", "长治市", "晋中市", "阳泉市", "朔州市", "运城市", "临汾市", "晋城市", "忻州市", "吕梁市"],
codes: ["140100", "140200", "140400", "140700", "140300", "140600", "140800", "141000", "140500", "140900", "141100"]
},
{
name: "内蒙古自治区",
procode: "15",
cities: ["呼和浩特市", "赤峰市", "通辽市", "锡林郭勒盟", "兴安盟", "包头市", "乌海市", "鄂尔多斯市", "呼伦贝尔市", "巴彦淖尔市", "乌兰察布市", "阿拉善盟"],
codes: ["150100", "150400", "150500", "152500", "152200", "150200", "150300", "150600", "150700", "150800", "150900", "152900"]
},
{
name: "辽宁省",
procode: "21",
cities: ["沈阳市", "大连市", "鞍山市", "抚顺市", "营口市", "锦州市", "丹东市", "朝阳市", "辽阳市", "阜新市", "铁岭市", "盘锦市", "本溪市", "葫芦岛市"],
codes: ["210100", "210200", "210300", "210400", "210800", "210700", "210600", "211300", "211000", "210900", "211200", "211100", "210500", "211400"]
},
{
name: "吉林省",
procode: "22",
cities: ["长春市", "吉林市", "四平市", "辽源市", "通化市", "延吉朝鲜族自治州", "白城市", "辽源市", "松原市", "白山市"],
codes: ["220100", "220200", "220300", "220400", "220500", "222400", "220800", "220400", "220700", "220600"]
},
{
name: "黑龙江省",
procode: "23",
cities: ["哈尔滨市", "齐齐哈尔市", "大庆市", "牡丹江市", "鹤岗市", "佳木斯市", "绥化市", "鸡西市", "双鸭山市", "伊春市", "七台河市", "黑河市", "大兴安岭地区"],
codes: ["230100", "230200", "230600", "231000", "230400", "230800", "231200", "230300", "230500", "230700", "230900", "231100", "232700"]
},
{
name: "上海市",
procode: "31",
cities: ["上海市"],
codes: ["310100"]
},
{
name: "江苏省",
procode: "32",
cities: ["南京市", "苏州市", "无锡市", "常州市", "扬州市", "徐州市", "南通市", "镇江市", "泰州市", "淮安市", "连云港市", "宿迁市", "盐城市"],
codes: ["320100", "320400", "320200", "320400", "321000", "320300", "320600", "321100", "321200", "320800", "320700", "321300", "320900"]
},
{
name: "浙江省",
procode: "33",
cities: ["杭州市", "金华市", "宁波市", "温州市", "嘉兴市", "绍兴市", "丽水市", "湖州市", "台州市", "舟山市", "衢州市"],
codes: ["330100", "330700", "330200", "330300", "330400", "330600", "331100", "330500", "331000", "330900", "330800"]
},
{
name: "安徽省",
procode: "34",
cities: ["合肥市", "马鞍山市", "蚌埠市", "黄山市", "芜湖市", "淮南市", "铜陵市", "阜阳市", "宣城市", "安庆市", "淮北市", "滁州市", "宿州市", "六安市", "亳州市", "池州市"],
codes: ["340100", "340500", "340300", "341000", "340200", "340400", "340700", "341200", "341800", "340800", "340600", "341100", "341300", "341500", "341600", "341700"]
},
{
name: "福建省",
procode: "35",
cities: ["福州市", "厦门市", "泉州市", "漳州市", "南平市", "龙岩市", "莆田市", "三明市", "宁德市"],
codes: ["350100", "350200", "350500", "350600", "350700", "350800", "350300", "350400", "350900"]
},
{
name: "江西省",
procode: "36",
cities: ["南昌市", "景德镇市", "上饶市", "萍乡市", "九江市", "吉安市", "宜春市", "鹰潭市", "新余市", "赣州市", "鹰潭市", "抚州市"],
codes: ["360100", "360200", "361100", "360300", "360400", "360800", "360900", "360600", "360500", "360700", "360600", "361000"]
},
{
name: "山东省",
procode: "37",
cities: ["青岛市", "济南市", "淄博市", "烟台市", "泰安市", "临沂市", "日照市", "德州市", "威海市", "东营市", "荷泽市", "济宁市", "潍坊市", "枣庄市", "聊城市", "莱芙市", "滨州市"],
codes: ["370200", "370100", "370300", "370600", "370900", "371300", "371100", "371400", "371000", "370500", "371700", "370800", "370700", "370400", "371500", "371200", "371600"]
},
{
name: "河南省",
procode: "41",
cities: ["郑州市", "洛阳市", "开封市", "平顶山市", "濮阳市", "安阳市", "许昌市", "南阳市", "信阳市", "周口市", "新乡市", "焦作市", "三门峡市", "商丘市", "鹤壁市", "漯河市", "驻马店市", "河南省直辖县级行政区划"],
codes: ["410100", "410300", "410200", "410400", "410900", "410500", "411000", "411300", "411500", "411600", "410700", "410800", "411200", "411400", "410600", "411100", "411700", "419000"]
},
{
name: "湖北省",
procode: "42",
cities: ["武汉市", "襄阳市", "孝感市", "十堰市", "荆州市", "黄石市", "宜昌市", "黄冈市", "恩施土家族苗族自治州市", "鄂州市", "咸宁市", "荆门市", "随州市", "湖北省直辖县级行政区划"],
codes: ["420100", "420600", "420900", "420300", "421000", "420200", "420500", "421100", "422800", "420700", "421200", "420800", "421300", "429000"]
},
{
name: "湖南省",
procode: "43",
cities: ["长沙市", "湘潭市", "岳阳市", "株洲市", "怀化市", "永州市", "益阳市", "张家界市", "常德市", "衡阳市", "邵阳市", "娄底市", "郴州市", "湘西土家族苗族自治州"],
codes: ["430100", "430300", "430600", "430200", "431200", "431100", "430900", "430800", "430700", "430400", "430500", "431300", "431000", "433100"]
},
{
name: "广东省",
procode: "44",
cities: ["广州市", "深圳市", "东莞市", "佛山市", "珠海市", "汕头市", "韶关市", "江门市", "梅州市", "揭阳市", "中山市", "河源市", "惠州市", "茂名市", "湛江市", "阳江市", "潮州市", "云浮市", "汕尾市", "肇庆市", "清远市"],
codes: ["440100", "440300", "441900", "440600", "440400", "440500", "440200", "440700", "441400", "445200", "442000", "441600", "441300", "440900", "440800", "441700", "445100", "445300", "441500", "441200", "441800"]
},
{
name: "广西省",
procode: "45",
cities: ["南宁市", "桂林市", "柳州市", "梧州市", "来宾市", "贵港市", "玉林市", "贺州市", "北海市", "防城港市", "钦州市", "百色市", "河池市", "崇左市"],
codes: ["450100", "450300", "450200", "450400", "451300", "450800", "450900", "451100", "450500", "450600", "450700", "451000", "451200", "451400"]
},
{
name: "海南省",
procode: "46",
cities: ["海口市", "三亚市", "三沙市", "儋州市", "海南省省直辖县级行政区划"],
codes: ["460100", "460200", "460300", "460400", "469000"]
},
{
name: "重庆市",
procode: "50",
cities: ["重庆市", "县"],
codes: ["500100", "500200"]
},
{
name: "四川省",
procode: "51",
cities: ["成都市", "达州市", "南充市", "乐山市", "绵阳市", "德阳市", "内江市", "遂宁市", "宜宾市", "巴中市", "自贡市", "攀枝花市", "泸州市", "广元市", "眉山市", "广安市", "雅安市", "资阳市", "阿坝藏族羌族自治州", "甘孜藏族自治州", "凉山彝族自治州"],
codes: ["510100", "511700", "511300", "511100", "510700", "510600", "511000", "510900", "511500", "511900", "510300", "510400", "510500", "510800", "511400", "511600", "511800", "512000", "513200", "513300", "513400"]
},
{
name: "贵州省",
procode: "52",
cities: ["贵阳市", "遵义市", "安顺市", "黔西南布衣族苗族自治州", "六盘水市", "毕节市", "铜仁市", "黔东南苗族侗族自治州", "黔南布衣族苗族自治州"],
codes: ["520100", "520300", "520400", "522300", "520200", "522400", "522200", "522600", "522700"]
},
{
name: "云南省",
procode: "53",
cities: ["昆明市", "丽江市", "昭通市", "玉溪市", "临沧市", "文山壮族苗族自治州", "楚雄彝族自治州", "大理白族自治州", "曲靖市", "保山市", "普洱市", "红河哈尼族彝族自治州", "西双版纳傣族自治州", "德宏傣族景颇族自治州", "怒江傈僳族自治州", "迪庆藏族自治州"],
codes: ["530100", "530700", "530600", "530400", "530900", "532600", "532300", "532900", "530300", "530500", "530800", "532500", "532800", "533100", "533300", "533400"]
},
{
name: "西藏自治区",
procode: "54",
cities: ["拉萨市", "林芝市", "日喀则市", "昌都市", "山南市", "那曲地区", "阿里地区"],
codes: ["540100", "542600", "542300", "542100", "542200", "542400", "542500"]
},
{
name: "陕西省",
procode: "61",
cities: ["西安市", "咸阳市", "延安市", "汉中市", "榆林市", "渭南市", "咸阳市", "铜川市", "宝鸡市", "安康市", "商洛市"],
codes: ["610100", "610400", "610600", "610700", "610800", "610500", "610400", "610200", "610300", "610900", "611000"]
},
{
name: "甘肃省",
procode: "62",
cities: ["兰州市", "金昌市", "天水市", "武威市", "张掖市", "平凉市", "酒泉市", "嘉峪关市", "白银市", "庆阳市", "定西市", "陇南市", "临夏回族自治州", "甘南藏族自治州"],
codes: ["620100", "620300", "620500", "620600", "620700", "620800", "620900", "620200", "620400", "621000", "621100", "621200", "622900", "623000"]
},
{
name: "青海省",
procode: "63",
cities: ["黄南藏族自治州", "海南藏族自治州", "西宁市", "海东市", "海西蒙古族藏族自治州", "海北藏族自治州", "果洛藏族自治州", "玉树藏族自治州"],
codes: ["632300", "632500", "630100", "632100", "632800", "632200", "632600", "632700"]
},
{
name: "宁夏回族自治区",
procode: "64",
cities: ["银川市", "石嘴山市", "吴忠市", "固原市", "中卫市"],
codes: ["640100", "640200", "640300", "640400", "640500"]
},
{
name: "新疆维吾尔自治区",
procode: "65",
cities: ["乌鲁木齐市", "哈密市", "喀什地区", "巴音郭楞蒙古自治州", "昌吉回族自治州", "伊犁哈萨克自治州", "阿勒泰地区", "克拉玛依市", "博尔塔拉蒙古自治州", "吐鲁番市", "阿克苏地区", "克孜勒苏柯尔克孜自治州", "和田地区", "塔城地区", "自治区直辖县级行政区划"],
codes: ["650100", "652200", "653100", "652800", "652300", "654000", "654300", "650200", "652700", "652100", "652900", "653000", "653200", "654200", "659000"]
},
{
name: "台湾省",
procode: "71",
cities: ["台湾"],
codes: ["710000"]
},
{
name: "香港特别行政区",
procode: "81",
cities: ["香港"],
codes: ["810000"]
},
{
name: "澳门特别行政区",
procode: "82",
cities: ["澳门"],
codes: ["820000"]
}
];
//选择省份
$('body').on('click', '.regional .proContent li', function () {
//用active类，标记省份
$('.regional .proContent li').removeClass('active');
$(this).addClass('active');
//该省份是否是全选
var classstr = $(this).find('i').hasClass('haveCheck') ? 'haveCheck' : 'noCheck';
//省份名字
var pname = $(this).text();
var citys = allarray[pname];
//加载省份的城市
$('.cityContent ul').html('');
//不是全选，并且有几个城市已经选中了。
if (classstr == 'noCheck' && $('.reg_select .selContent div[name="' + pname + '"]').length > 0) {
var citynames = new Array();
$('.reg_select .selContent div[name="' + pname + '"] .cityDiv').each(function () {
citynames.push($(this).text());
});
$.each(citys, function (i, v) {
if (citynames.indexOf(v) == -1) {
$('.cityContent ul').append('<li><i class="' + classstr + '"></i><span class="cityName">' + v + '</span></li>');
}
else {
$('.cityContent ul').append('<li><i class="haveCheck"></i><span class="cityName">' + v + '</span></li>');
}
});
} else {
$.each(citys, function (i, v) {
$('.cityContent ul').append('<li><i class="' + classstr + '"></i><span class="cityName">' + v + '</span></li>');
});
}
});
//绘制省份
$.each(areadata, function (i, v) {
//把所有省份以及其下的城市存储起来
allarray[v.name] = v.cities;
//编辑
if (!isNull(regional)) {
var n = 0;
$.each(v.cities, function (i, k) {
if (regional.indexOf(k) != -1) {
n++;
if ($('.reg_select .selContent div[name="' + v.name + '"]').length == 0) {
$('.reg_select .selContent').append('<div class="selectsDiv" name="' + v.name + '"><p>' + v.name + '</p><div class="cityDiv" name="' + k + '">' + k + '<i></i></div></div>');
}
else {
$('.reg_select .selContent div[name="' + v.name + '"] p').after('<div class="cityDiv" name="' + k + '">' + k + '<i></i></div>');
}
}
});
if (n == v.cities.length) {
$('.proContent ul').append('<li name="' + v.name + '"><i class="haveCheck"></i>' + v.name + '</li>');
$('.reg_select .selContent div[name="' + v.name + '"]').remove();
$('.reg_select .selContent').append('<div class="selectsDiv" name="' + v.name + '"><p>' + v.name + '</p><div class="cityDiv" name="' + v.cities.join() + '">全部<i></i></div></div>');
}
else {
$('.proContent ul').append('<li name="' + v.name + '"><i class="noCheck"></i><span class="cityName">' + v.name + '</span></li>');
}
}
else {
//新建
$('.proContent ul').append('<li name="' + v.name + '"><i class="noCheck"></i><span class="cityName">' + v.name + '</span></li>');
}
});
//绘制分组
$('.group_select .selectsDiv').html('');
$.each(groups, function (i, v) {
var classname = 'noCheck';
if (!isNull(receptionids) && receptionids.indexOf(v.id.toString() != -1)) {
classname = 'haveCheck';
$('.group_select .selectsDiv').append('<div class="groupSelDiv" name="' + v.id + '">' + v.name + '<i></i></div>');
}
$('.groupContent ul').append('<li name="' + v.id + '"><i class="' + classname + '"></i>' + v.name + '</li>');
});
//点击省份前的CheckBox
$('body').on('click', '.regional .proContent li i', function () {
var name = $(this).parent().text();
$('.reg_select .selContent div[name="' + name + '"]').remove();
if ($(this).attr('class') == 'noCheck') {
$(this).attr('class', 'haveCheck');
$('.reg_select .selContent').append('<div class="selectsDiv" name="' + name + '"><p>' + name + '</p><div class="cityDiv" name="' + allarray[name].join() + '">全部<i></i></div></div>');
}
else {
$(this).attr('class', 'noCheck');
}
});
//点击城市前的CheckBox
$('body').on('click', '.regional .cityContent li i', function () {
var proname = $('.regional .proContent li.active').text();
var cityname = $(this).parent().text();
if ($(this).hasClass('noCheck')) {
$(this).attr('class', 'haveCheck');
//未选中的城市的个数
var nochecklength = $('.regional .cityContent li i.noCheck').length;
//该省份下的城市没有全部选中
if (nochecklength > 0) {
//初次选中一个城市
if ($('.reg_select .selContent div[name="' + proname + '"]').length == 0) {
$('.reg_select .selContent').append('<div class="selectsDiv" name="' + proname + '"><p>' + proname + '</p><div class="cityDiv" name="' + cityname + '">' + cityname + '<i></i></div></div>');
}
else {
//之前就选过
$('.reg_select .selContent div[name="' + proname + '"] p').after('<div class="cityDiv" name="' + cityname + '">' + cityname + '<i></i></div>');
}
}
//该省份下的所有城市被选中
else {
//省份前的checkbox选中
$('.regional .proContent li.active i').removeClass('noCheck');
$('.regional .proContent li.active i').addClass('haveCheck');
//展示栏
//特别行政区或直辖市，下属就一个市区
if ($('.reg_select .selContent div[name="' + proname + '"]').length == 0) {
$('.reg_select .selContent').append('<div class="selectsDiv" name="' + proname + '"><p>' + proname + '</p><div class="cityDiv" name="' + cityname + '">' + cityname + '<i></i></div></div>');
}
else {
$('.reg_select .selContent div[name="' + proname + '"] .cityDiv').remove();
$('.reg_select .selContent div[name="' + proname + '"] p').after('<div class="cityDiv" name="' + (allarray[proname].join() + '">全部<i></i></div>'));
}
}
}
else {
//点击之前的选中个数
var oldhavechecklength = $('.regional .cityContent li i.haveCheck').length;
$(this).attr('class', 'noCheck');
//不是全选，省份前的checkbox设为未选中
$('.regional .proContent li.active i').removeClass('haveCheck');
$('.regional .proContent li.active i').addClass('noCheck');
//点击之后的选中个数
var havechecklength = $('.regional .cityContent li i.haveCheck').length;
if (havechecklength > 0) {
//之前是城市全部选中
if (oldhavechecklength == allarray[proname].length) {
var cityliststr = $('.reg_select .selContent div[name="' + proname + '"] .cityDiv').attr('name');
var citylist = cityliststr.split(',');
$('.reg_select .selContent div[name="' + proname + '"] .cityDiv').remove();
$.each(citylist, function (i, v) {
if (v != cityname) {
$('.reg_select .selContent div[name="' + proname + '"] p').after('<div class="cityDiv" name="' + v + '">' + v + '<i></i></div>');
}
});
$($('.regional .cityContent li i.haveCheck'));
}
else {
$('.reg_select .selContent div[name="' + cityname + '"]').remove();
}
}
else {
//展示栏去掉这个省份
$('.reg_select .selContent div[name="' + proname + '"]').remove();
}
}
});
//点击分组前的CheckBox
$('body').on('click', '.group .groupContent li i', function () {
var gname = $(this).parent().text();
var groupid = $(this).parent().attr('name');
if ($(this).attr('class') == 'noCheck') {
$(this).attr('class', 'haveCheck');
var flag = true;
$('.selectsDiv .groupSelDiv').each(function () {
if (gname == $(this).text()) {
flag = false;
return;
}
})
if (flag) {
$('.group .group_select .selectsDiv').append('<div class="groupSelDiv" name="' + groupid + '">' + gname + '<i></i></div>');
}
}
else {
$('.selectsDiv div[name="' + groupid + '"]').remove();
$(this).attr('class', 'noCheck');
}
});
//自动分配 添加规则 删除已选城市
$('body').on('click', '.reg_select .cityDiv i', function () {
var pname = $(this).parent().parent().attr('name');
if ($(this).parent().parent().find('.cityDiv').length == 1) {
$(this).parent().parent().remove();
}
else {
$(this).parent().remove();
}
//把省改为未选中状态
$('.regional .proContent li[name="' + pname + '"] i').removeClass('haveCheck');
$('.regional .proContent li[name="' + pname + '"] i').addClass('noCheck');
//删除的这个正是当前展示的省
if ($('.regional .proContent li.active').text() == pname) {
$('.regional .proContent li.active').unbind('click').click();
}
});
//自动分配 添加规则 删除已选客服分组
$('body').on('click', '.group_select .groupSelDiv i', function () {
var gname = $(this).parent().attr('name');
if ($(this).parent().parent().find('.groupSelDiv').length == 1) {
$(this).parents('.selectsDiv').html('');
}
else {
$(this).parent().remove();
}
$('.group .groupContent li[name="' + gname + '"] i').removeClass('haveCheck');
$('.group .groupContent li[name="' + gname + '"] i').addClass('noCheck');
});
//自动分配 添加规则 清空
$('body').on('click', '.select_title span', function () {
//$(this).hide();
//地区的清空
if ($(this).parents('.reg_select').length != 0) {
$(this).parent().parent().find('.selContent').html('');
//所有省、市都变为未选中状态
$('.regional .proContent li i,.regional .cityContent li i').removeClass('haveCheck');
$('.regional .proContent li i,.regional .cityContent li i').addClass('noCheck');
}
else {
//客服分组的清空
$(this).parent().parent().find('.selContent .selectsDiv').html('');
//所有客服分组变为未选中状态
$('.group .groupContent li i').removeClass('haveCheck');
$('.group .groupContent li i').addClass('noCheck');
}
});
function isNull(str) {
str = $.trim(str);
if (typeof str == undefined || str == null || str == "")
return true;
var regu = "^[ ]+$";
var re = new RegExp(regu);
return re.test(str);
}
网友评论