<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style type="text/css">
.form-group{
width: 100%;
margin-top: 20px;
}
.st-select {
width: 80px;
height: 20px;
}
.form-title{
float: left;
}
.form-con{
float: left;
}
</style>
</head>
<body>
<div class="form-group">
<div class="form-title">
<span>城市类型:</span>
</div>
<div class="form-con">
<div id="">
<select class="st-select prov" name="city_class" id="city_class" >
<option value="1" selected="selected">一级城市</option>
<option value="2">二级城市</option>
<option value="3">三级城市</option>
</select>
</div>
</div>
</div>
<br />
<div class="form-group">
<div class="form-title">
<span>城市精准:</span>
</div>
<div class="form-con">
<div id="">
<select class="st-select prov" name="city" id="city"></select>
</div>
</div>
</div>
<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
<script src="../js/city.js"></script>
</body>
</html>
function getAreaData_screen() {
return {
c1: [{
110100: "北京市"
}, {
310100: "上海市"
}, {
440100: "广州市"
}, {
440300: "深圳市"
}],
c2: [{
510100: "成都市"
}, {
500100: "重庆市"
}, {
330100: "杭州市"
}, {
420100: "武汉市"
}, {
320100: "南京市"
}, {
410100: "郑州市"
}, {
610100: "西安市"
}, {
210100: "沈阳市"
}, {
430100: "长沙市"
}, {
530100: "昆明市"
}, {
120100: "天津市"
}, {
330200: "宁波市"
}, {
350200: "厦门市"
}, {
370100: "济南市"
}, {
140100: "太原市"
}, {
360100: "南昌市"
}, {
520100: "贵阳市"
}, {
450100: "南宁市"
}, {
340100: "合肥市"
}, {
130100: "石家庄市"
}, {
320200: "无锡市"
}, {
320500: "苏州市"
}, {
370200: "青岛市"
}, {
210200: "大连市"
}, {
330300: "温州市"
}, {
220100: "长春市"
}, {
230100: "哈尔滨市"
}, {
320400: "常州市"
}, {
620100: "兰州市"
}, {
350100: "福州市"
}],
c3: [{
460100: "海口市"
}, {
630100: "西宁市"
}, {
150100: "呼和浩特市"
}, {
440700: "江门市"
},
{
320300: "徐州市"
}, {
410200: "开封市"
}, {
440400: "珠海市"
}, {
350500: "泉州市"
}, {
442e3: "中山市"
}, {
130600: "保定市"
}, {
130200: "唐山市"
}, {
130300: "秦皇岛市"
}, {
131e3: "廊坊市"
},
{
321e3: "扬州市"
}, {
321100: "镇江市"
}, {
340200: "芜湖市"
}, {
330500: "湖州市"
}, {
320800: "淮安市"
}, {
340500: "马鞍山市"
}, {
320700: "连云港市"
}, {
460200: "三亚市"
}, {
450300: "桂林市"
}, {
350600: "漳州市"
}, {
450200: "柳州市"
}, {
610400: "咸阳市"
}, {
530400: "玉溪市"
}, {
410300: "洛阳市"
}, {
430200: "株洲市"
}, {
420500: "宜昌市"
}, {
420600: "襄阳市"
}, {
360400: "九江市"
},
{
430600: "岳阳市"
}, {
420900: "孝感市"
}, {
421003: "荆州区"
}, {
370600: "烟台市"
}, {
370700: "潍坊市"
}, {
371e3: "威海市"
}, {
320600: "南通市"
}, {
330700: "金华市"
}, {
331e3: "台州市"
}, {
320900: "盐城市"
}, {
321200: "泰州市"
}, {
321300: "宿迁市"
}, {
330800: "衢州市"
}, {
331100: "丽水市"
}, {
330900: "舟山市"
}, {
440500: "汕头市"
}, {
441500: "汕尾市"
}, {
441800: "清远市"
}, {
441200: "肇庆市"
}, {
445200: "揭阳市"
}, {
511300: "南充市"
}, {
350900: "宁德市"
}, {
210800: "营口市"
}, {
210421: "抚顺县"
}, {
330400: "嘉兴市"
}, {
330600: "绍兴市"
}, {
520300: "遵义市"
}, {
411300: "南阳市"
}, {
371300: "临沂市"
}
]
}
}
var city_data = getAreaData_screen();
var arr1 = []
for (var i = 0; i < city_data.c1.length; i++) {
arr1.push({
lable: Object.keys(city_data.c1[i]),
value: Object.values(city_data.c1[i])
})
}
var arr2 = []
for (var j = 0; j < city_data.c2.length; j++) {
arr2.push({
lable: Object.keys(city_data.c2[j]),
value: Object.values(city_data.c2[j])
})
}
var arr3 = []
for (var g = 0; g < city_data.c3.length; g++) {
arr3.push({
lable: Object.keys(city_data.c3[g]),
value: Object.values(city_data.c3[g])
})
}
function set(arr) {
$("#city").empty();
let htmllet = "";
for (var k = 0; k < arr.length; k++) {
htmllet += '<option value=' + arr[k].lable + '>' + arr[k].value + '</option>'
}
document.getElementById("city").innerHTML = htmllet;
}
set(arr1)
$("#city_class").click(
function() {
var options = $("#city_class option:selected");
if (options.val() == "1") {
set(arr1)
} else if (options.val() == "2") {
set(arr2)
} else {
set(arr3)
}
})
$("#city").click(function() {
console.log($("#city_class option:selected").val())
console.log($("#city option:selected").val())
})