Vue 实现省市区三级联动选择（附带JSON数据）
2024-06-10 17:37:50
功能需求： 做一个省市区三级联动得选择控件，效果如图
1.html 部分
- 代码
<div class="col-sm-10"><select id="s_province" name="s_province" class="form-control" style="width:32%" v-model="address.s_province"><option value="defualt" disabled>请选择省</option><option v-for="index in address.g_dict" :value="index.value">{{ index.label }}</option></select><select id="s_city" name="s_city" class="form-control" style="width:33%" v-model="address.s_city"><option value="defualt" disabled>请选择市</option><option v-for="index in address.f_dict" :value="index.value">{{ index.label }}</option></select><select id="s_county" name="s_county" class="form-control" style="width:33%" v-model="address.s_county"><option value="defualt" disabled>请选择区、县</option><option v-for="index in address.s_dict" :value="index.value">{{ index.label }}</option></select>
</div>
2.js部分
var vm = new Vue({el:'#rrapp',data:{address: {g_dict:'',f_dict:'',s_dict:'',s_province:'defualt',s_city:'defualt',s_county:'defualt',},},watch:{"address.s_province":(val,oldVal)=>{if(val != 'defualt' && oldVal != 'defualt'){vm.address.s_city = "defualt"vm.address.s_county = "defualt"}for(let index in _areaDict){if(_areaDict[index].value == val) {vm.address.f_dict = _areaDict[index].childrenreturn}}},"address.s_city":(val,oldVal)=>{if(val != 'defualt' && oldVal != 'defualt'){vm.address.s_county = "defualt"}for(let index in vm.address.f_dict){if(vm.address.f_dict[index].value == val) {vm.address.s_dict = vm.address.f_dict[index].childrenreturn}}},},methods: {// 初始化函数 先清空对象值initArea: function (event){vm.address = {g_dict:'', // 爷字典 省级数据对象f_dict:'', // 父字典 市级数据对象s_dict:'', // 子字典 区、县数据对象s_province:'defualt', // 省级选择数据绑定s_city:'defualt', // 市级选择数据绑定s_county:'defualt', // 区县选择数据绑定};vm.address.g_dict = _areaDict},// 设置值方法 编辑取值赋值用 存label值setArea:function (event){let address = vm.possCustomerInfo.addressaddress = address.split(',')for(let i in _areaDict){if(_areaDict[i].label == address[0]){vm.address.s_province = _areaDict[i].valuefor(let j in _areaDict[i].children){if(_areaDict[i].children[j].label == address[1]){vm.address.s_city = _areaDict[i].children[j].valuefor(let k in _areaDict[i].children[j].children){if( _areaDict[i].children[j].children[k].label == address[2]){vm.address.s_county = _areaDict[i].children[j].children[k].valuereturn}}}}} }}}
});
3.JSON 格式数据
笔者这里用js对象格式替代json文件
var _areaDict = [ { "value": 1, "label": "北京", "children": [ { "value": 2, "label": "北京市", "children": [ { "value": 3, "label": "东城区" }, { "value": 8, "label": "丰台区" }, { "value": 16, "label": "大兴区" }, { "value": 6, "label": "宣武区" }, { "value": 19, "label": "密云县" }, { "value": 5, "label": "崇文区" }, { "value": 18, "label": "平谷区" }, { "value": 20, "label": "延庆县" }, { "value": 17, "label": "怀柔区" }, { "value": 12, "label": "房山区" }, { "value": 15, "label": "昌平区" }, { "value": 7, "label": "朝阳区" }, { "value": 10, "label": "海淀区" }, { "value": 9, "label": "石景山区" }, { "value": 4, "label": "西城区" }, { "value": 13, "label": "通州区" }, { "value": 11, "label": "门头沟区" }, { "value": 14, "label": "顺义区" } ] } ] }, { "value": 104, "label": "安徽", "children": [ { "value": 105, "label": "合肥市", "children": [ { "value": 109, "label": "包河区" }, { "value": 3255, "label": "巢湖市" }, { "value": 107, "label": "庐阳区" }, { "value": 106, "label": "瑶海区" }, { "value": 111, "label": "肥东县" }, { "value": 112, "label": "肥西县" }, { "value": 108, "label": "蜀山区" }, { "value": 110, "label": "长丰县" } ] }, { "value": 113, "label": "安庆市", "children": [ { "value": 115, "label": "大观区" }, { "value": 120, "label": "太湖县" }, { "value": 121, "label": "宿松县" }, { "value": 123, "label": "岳西县" }, { "value": 117, "label": "怀宁县" }, { "value": 122, "label": "望江县" }, { "value": 118, "label": "枞阳县" }, { "value": 124, "label": "桐城市" }, { "value": 119, "label": "潜山县" }, { "value": 114, "label": "迎江区" }, { "value": 116, "label": "郊区" } ] }, { "value": 125, "label": "蚌埠市", "children": [ { "value": 131, "label": "五河县" }, { "value": 132, "label": "固镇县" }, { "value": 130, "label": "怀远县" }, { "value": 129, "label": "淮上区" }, { "value": 128, "label": "禹会区" }, { "value": 127, "label": "蚌山区" }, { "value": 126, "label": "龙子湖区" } ] }, { "value": 133, "label": "亳州市", "children": [ { "value": 137, "label": "利辛县" }, { "value": 135, "label": "涡阳县" }, { "value": 136, "label": "蒙城县" }, { "value": 134, "label": "谯城区" } ] }, { "value": 138, "label": "巢湖市", "children": [ { "value": 142, "label": "含山县" }, { "value": 143, "label": "和县" }, { "value": 139, "label": "居巢区" }, { "value": 140, "label": "庐江县" }, { "value": 141, "label": "无为县" } ] }, { "value": 144, "label": "池州市", "children": [ { "value": 146, "label": "东至县" }, { "value": 147, "label": "石台县" }, { "value": 145, "label": "贵池区" }, { "value": 148, "label": "青阳县" } ] }, { "value": 149, "label": "滁州市", "children": [ { "value": 153, "label": "全椒县" }, { "value": 155, "label": "凤阳县" }, { "value": 151, "label": "南谯区" }, { "value": 156, "label": "天长市" }, { "value": 154, "label": "定远县" }, { "value": 157, "label": "明光市" }, { "value": 152, "label": "来安县" }, { "value": 150, "label": "琅琊区" } ] }, { "value": 158, "label": "阜阳市", "children": [ { "value": 162, "label": "临泉县" }, { "value": 163, "label": "太和县" }, { "value": 166, "label": "界首市" }, { "value": 164, "label": "阜南县" }, { "value": 165, "label": "颍上县" }, { "value": 160, "label": "颍东区" }, { "value": 159, "label": "颍州区" }, { "value": 161, "label": "颍泉区" } ] }, { "value": 167, "label": "淮北市", "children": [ { "value": 168, "label": "杜集区" }, { "value": 171, "label": "濉溪县" }, { "value": 170, "label": "烈山区" }, { "value": 169, "label": "相山区" } ] }, { "value": 172, "label": "淮南市", "children": [ { "value": 176, "label": "八公山区" }, { "value": 178, "label": "凤台县" }, { "value": 173, "label": "大通区" }, { "value": 177, "label": "潘集区" }, { "value": 174, "label": "田家庵区" }, { "value": 175, "label": "谢家集区" } ] }, { "value": 179, "label": "黄山市", "children": [ { "value": 184, "label": "休宁县" }, { "value": 180, "label": "屯溪区" }, { "value": 182, "label": "徽州区" }, { "value": 183, "label": "歙县" }, { "value": 186, "label": "祁门县" }, { "value": 181, "label": "黄山区" }, { "value": 185, "label": "黟县" } ] }, { "value": 187, "label": "六安市", "children": [ { "value": 190, "label": "寿县" }, { "value": 192, "label": "舒城县" }, { "value": 189, "label": "裕安区" }, { "value": 188, "label": "金安区" }, { "value": 193, "label": "金寨县" }, { "value": 194, "label": "霍山县" }, { "value": 191, "label": "霍邱县" } ] }, { "value": 195, "label": "马鞍山市", "children": [ { "value": 199, "label": "当涂县" }, { "value": 197, "label": "花山区" }, { "value": 196, "label": "金家庄区" }, { "value": 198, "label": "雨山区" } ] }, { "value": 200, "label": "宿州市", "children": [ { "value": 201, "label": "墉桥区" }, { "value": 205, "label": "泗县" }, { "value": 204, "label": "灵璧县" }, { "value": 202, "label": "砀山县" }, { "value": 203, "label": "萧县" } ] }, { "value": 206, "label": "铜陵市", "children": [ { "value": 208, "label": "狮子山区" }, { "value": 209, "label": "郊区" }, { "value": 207, "label": "铜官山区" }, { "value": 210, "label": "铜陵县" } ] }, { "value": 211, "label": "芜湖市", "children": [ { "value": 218, "label": "南陵县" }, { "value": 214, "label": "新芜区" }, { "value": 217, "label": "繁昌县" }, { "value": 216, "label": "芜湖县" }, { "value": 212, "label": "镜湖区" }, { "value": 213, "label": "马塘区" }, { "value": 215, "label": "鸠江区" } ] }, { "value": 219, "label": "宣城市", "children": [ { "value": 226, "label": "宁国市" }, { "value": 220, "label": "宣州区" }, { "value": 222, "label": "广德县" }, { "value": 225, "label": "旌德县" }, { "value": 223, "label": "泾县" }, { "value": 224, "label": "绩溪县" }, { "value": 221, "label": "郎溪县" } ] } ] }, { "value": 1176, "label": "黑龙江", "children": [ { "value": 1177, "label": "哈尔滨市", "children": [ { "value": 1196, "label": "五常市" }, { "value": 1186, "label": "依兰县" }, { "value": 1182, "label": "动力区" }, { "value": 1179, "label": "南岗区" }, { "value": 1194, "label": "双城市" }, { "value": 1185, "label": "呼兰区" }, { "value": 1188, "label": "宾县" }, { "value": 1195, "label": "尚志市" }, { "value": 1189, "label": "巴彦县" }, { "value": 1183, "label": "平房区" }, { "value": 1192, "label": "延寿县" }, { "value": 1187, "label": "方正县" }, { "value": 1190, "label": "木兰县" }, { "value": 1184, "label": "松北区" }, { "value": 1191, "label": "通河县" }, { "value": 1180, "label": "道外区" }, { "value": 1178, "label": "道里区" }, { "value": 1193, "label": "阿城市" }, { "value": 1181, "label": "香坊区" } ] }, { "value": 1197, "label": "大庆市", "children": [ { "value": 1202, "label": "大同区" }, { "value": 1206, "label": "杜尔伯特蒙古族自治县" }, { "value": 1205, "label": "林甸县" }, { "value": 1201, "label": "红岗区" }, { "value": 1203, "label": "肇州县" }, { "value": 1204, "label": "肇源县" }, { "value": 1198, "label": "萨尔图区" }, { "value": 1200, "label": "让胡路区" }, { "value": 1199, "label": "龙凤区" } ] }, { "value": 1207, "label": "大兴安岭地区", "children": [ { "value": 1208, "label": "呼玛县" }, { "value": 1209, "label": "塔河县" }, { "value": 1210, "label": "漠河县" } ] }, { "value": 1211, "label": "鹤岗市", "children": [ { "value": 1216, "label": "东山区" }, { "value": 1215, "label": "兴安区" }, { "value": 1217, "label": "兴山区" }, { "value": 1214, "label": "南山区" }, { "value": 1212, "label": "向阳区" }, { "value": 1213, "label": "工农区" }, { "value": 1219, "label": "绥滨县" }, { "value": 1218, "label": "萝北县" } ] }, { "value": 1220, "label": "黑河市", "children": [ { "value": 1226, "label": "五大连池市" }, { "value": 1225, "label": "北安市" }, { "value": 1222, "label": "嫩江县" }, { "value": 1224, "label": "孙吴县" }, { "value": 1221, "label": "爱辉区" }, { "value": 1223, "label": "逊克县" } ] }, { "value": 1227, "label": "鸡西市", "children": [ { "value": 1232, "label": "城子河区" }, { "value": 1236, "label": "密山市" }, { "value": 1229, "label": "恒山区" }, { "value": 1231, "label": "梨树区" }, { "value": 1230, "label": "滴道区" }, { "value": 1235, "label": "虎林市" }, { "value": 1234, "label": "鸡东县" }, { "value": 1228, "label": "鸡冠区" }, { "value": 1233, "label": "麻山区" } ] }, { "value": 1237, "label": "佳木斯市", "children": [ { "value": 1241, "label": "东风区" }, { "value": 1240, "label": "前进区" }, { "value": 1247, "label": "同江市" }, { "value": 1239, "label": "向阳区" }, { "value": 1248, "label": "富锦市" }, { "value": 1246, "label": "抚远县" }, { "value": 1243, "label": "桦南县" }, { "value": 1244, "label": "桦川县" }, { "value": 1238, "label": "永红区" }, { "value": 1245, "label": "汤原县" }, { "value": 1242, "label": "郊区" } ] }, { "value": 1249, "label": "牡丹江市", "children": [ { "value": 1254, "label": "东宁县" }, { "value": 1250, "label": "东安区" }, { "value": 1258, "label": "宁安市" }, { "value": 1255, "label": "林口县" }, { "value": 1257, "label": "海林市" }, { "value": 1252, "label": "爱民区" }, { "value": 1259, "label": "穆棱市" }, { "value": 1256, "label": "绥芬河市" }, { "value": 1253, "label": "西安区" }, { "value": 1251, "label": "阳明区" } ] }, { "value": 1260, "label": "七台河市", "children": [ { "value": 1264, "label": "勃利县" }, { "value": 1261, "label": "新兴区" }, { "value": 1262, "label": "桃山区" }, { "value": 1263, "label": "茄子河区" } ] }, { "value": 1265, "label": "齐齐哈尔市", "children": [ { "value": 1274, "label": "依安县" }, { "value": 1279, "label": "克东县" }, { "value": 1278, "label": "克山县" }, { "value": 1270, "label": "富拉尔基区" }, { "value": 1277, "label": "富裕县" }, { "value": 1267, "label": "建华区" }, { "value": 1280, "label": "拜泉县" }, { "value": 1269, "label": "昂昂溪区" }, { "value": 1272, "label": "梅里斯达斡尔族区" }, { "value": 1275, "label": "泰来县" }, { "value": 1276, "label": "甘南县" }, { "value": 1271, "label": "碾子山区" }, { "value": 1281, "label": "讷河市" }, { "value": 1268, "label": "铁锋区" }, { "value": 1273, "label": "龙江县" }, { "value": 1266, "label": "龙沙区" } ] }, { "value": 1282, "label": "双鸭山市", "children": [ { "value": 1288, "label": "友谊县" }, { "value": 1285, "label": "四方台区" }, { "value": 1286, "label": "宝山区" }, { "value": 1289, "label": "宝清县" }, { "value": 1283, "label": "尖山区" }, { "value": 1284, "label": "岭东区" }, { "value": 1287, "label": "集贤县" }, { "value": 1290, "label": "饶河县" } ] }, { "value": 1291, "label": "绥化市", "children": [ { "value": 1294, "label": "兰西县" }, { "value": 1292, "label": "北林区" }, { "value": 1299, "label": "安达市" }, { "value": 1296, "label": "庆安县" }, { "value": 1297, "label": "明水县" }, { "value": 1293, "label": "望奎县" }, { "value": 1301, "label": "海伦市" }, { "value": 1298, "label": "绥棱县" }, { "value": 1300, "label": "肇东市" }, { "value": 1295, "label": "青冈县" } ] }, { "value": 1302, "label": "伊春市", "children": [ { "value": 1317, "label": "上甘岭区" }, { "value": 1315, "label": "乌伊岭区" }, { "value": 1312, "label": "乌马河区" }, { "value": 1311, "label": "五营区" }, { "value": 1303, "label": "伊春区" }, { "value": 1304, "label": "南岔区" }, { "value": 1305, "label": "友好区" }, { "value": 1318, "label": "嘉荫县" }, { "value": 1314, "label": "带岭区" }, { "value": 1308, "label": "新青区" }, { "value": 1313, "label": "汤旺河区" }, { "value": 1316, "label": "红星区" }, { "value": 1309, "label": "美溪区" }, { "value": 1307, "label": "翠峦区" }, { "value": 1306, "label": "西林区" }, { "value": 1310, "label": "金山屯区" }, { "value": 1319, "label": "铁力市" } ] } ] }, { "value": 1320, "label": "湖北", "children": [ { "value": 1321, "label": "武汉市", "children": [ { "value": 1329, "label": "东西湖区" }, { "value": 1334, "label": "新洲区" }, { "value": 1326, "label": "武昌区" }, { "value": 1330, "label": "汉南区" }, { "value": 1325, "label": "汉阳区" }, { "value": 1332, "label": "江夏区" }, { "value": 1322, "label": "江岸区" }, { "value": 1323, "label": "江汉区" }, { "value": 1328, "label": "洪山区" }, { "value": 1324, "label": "硚口区" }, { "value": 1331, "label": "蔡甸区" }, { "value": 1327, "label": "青山区" }, { "value": 1333, "label": "黄陂区" } ] }, { "value": 1335, "label": "鄂州市", "children": [ { "value": 1337, "label": "华容区" }, { "value": 1336, "label": "梁子湖区" }, { "value": 1338, "label": "鄂城区" } ] }, { "value": 1339, "label": "恩施土家族苗族自治州", "children": [ { "value": 1341, "label": "利川市" }, { "value": 1345, "label": "咸丰县" }, { "value": 1344, "label": "宣恩县" }, { "value": 1343, "label": "巴东县" }, { "value": 1342, "label": "建始县" }, { "value": 1340, "label": "恩施市" }, { "value": 1346, "label": "来凤县" }, { "value": 1347, "label": "鹤峰县" } ] }, { "value": 1348, "label": "黄冈市", "children": [ { "value": 1350, "label": "团风县" }, { "value": 1358, "label": "武穴市" }, { "value": 1354, "label": "浠水县" }, { "value": 1351, "label": "红安县" }, { "value": 1352, "label": "罗田县" }, { "value": 1353, "label": "英山县" }, { "value": 1355, "label": "蕲春县" }, { "value": 1357, "label": "麻城市" }, { "value": 1349, "label": "黄州区" }, { "value": 1356, "label": "黄梅县" } ] }, { "value": 1359, "label": "黄石市", "children": [ { "value": 1362, "label": "下陆区" }, { "value": 1365, "label": "大冶市" }, { "value": 1361, "label": "西塞山区" }, { "value": 1363, "label": "铁山区" }, { "value": 1364, "label": "阳新县" }, { "value": 1360, "label": "黄石港区" } ] }, { "value": 1366, "label": "荆门市", "children": [ { "value": 1367, "label": "东宝区" }, { "value": 1369, "label": "京山县" }, { "value": 1368, "label": "掇刀区" }, { "value": 1370, "label": "沙洋县" }, { "value": 1371, "label": "钟祥市" } ] }, { "value": 1372, "label": "荆州市", "children": [ { "value": 1375, "label": "公安县" }, { "value": 1380, "label": "松滋市" }, { "value": 1377, "label": "江陵县" }, { "value": 1373, "label": "沙市区" }, { "value": 1379, "label": "洪湖市" }, { "value": 1376, "label": "监利县" }, { "value": 1378, "label": "石首市" }, { "value": 1374, "label": "荆州区" } ] }, { "value": 1383, "label": "十堰市", "children": [ { "value": 1391, "label": "丹江口市" }, { "value": 1385, "label": "张湾区" }, { "value": 1390, "label": "房县" }, { "value": 1388, "label": "竹山县" }, { "value": 1389, "label": "竹溪县" }, { "value": 1384, "label": "茅箭区" }, { "value": 1386, "label": "郧县" }, { "value": 1387, "label": "郧西县" } ] }, { "value": 1392, "label": "随州市", "children": [ { "value": 1394, "label": "广水市" }, { "value": 1393, "label": "曾都区" } ] }, { "value": 1397, "label": "咸宁市", "children": [ { "value": 1398, "label": "咸安区" }, { "value": 1399, "label": "嘉鱼县" }, { "value": 1401, "label": "崇阳县" }, { "value": 1403, "label": "赤壁市" }, { "value": 1400, "label": "通城县" }, { "value": 1402, "label": "通山县" } ] }, { "value": 1404, "label": "襄樊市", "children": [ { "value": 1410, "label": "保康县" }, { "value": 1408, "label": "南漳县" }, { "value": 1413, "label": "宜城市" }, { "value": 1412, "label": "枣阳市" }, { "value": 1406, "label": "樊城区" }, { "value": 1411, "label": "老河口市" }, { "value": 1405, "label": "襄城区" }, { "value": 1407, "label": "襄阳区" }, { "value": 1409, "label": "谷城县" } ] }, { "value": 1414, "label": "孝感市", "children": [ { "value": 1418, "label": "云梦县" }, { "value": 1417, "label": "大悟县" }, { "value": 1415, "label": "孝南区" }, { "value": 1416, "label": "孝昌县" }, { "value": 1420, "label": "安陆市" }, { "value": 1419, "label": "应城市" }, { "value": 1421, "label": "汉川市" } ] }, { "value": 1422, "label": "宜昌市", "children": [ { "value": 1432, "label": "五峰土家族自治县" }, { "value": 1424, "label": "伍家岗区" }, { "value": 1429, "label": "兴山县" }, { "value": 1427, "label": "夷陵区" }, { "value": 1433, "label": "宜都市" }, { "value": 1434, "label": "当阳市" }, { "value": 1435, "label": "枝江市" }, { "value": 1425, "label": "点军区" }, { "value": 1426, "label": "猇亭区" }, { "value": 1430, "label": "秭归县" }, { "value": 1423, "label": "西陵区" }, { "value": 1428, "label": "远安县" }, { "value": 1431, "label": "长阳土家族自治县" } ] } ] }, { "value": 1436, "label": "湖南", "children": [ { "value": 1437, "label": "长沙市", "children": [ { "value": 1439, "label": "天心区" }, { "value": 1445, "label": "宁乡县" }, { "value": 1440, "label": "岳麓区" }, { "value": 1441, "label": "开福区" }, { "value": 1444, "label": "望城县" }, { "value": 1446, "label": "浏阳市" }, { "value": 1438, "label": "芙蓉区" }, { "value": 1443, "label": "长沙县" }, { "value": 1442, "label": "雨花区" } ] }, { "value": 1447, "label": "常德市", "children": [ { "value": 1453, "label": "临澧县" }, { "value": 1450, "label": "安乡县" }, { "value": 1454, "label": "桃源县" }, { "value": 1448, "label": "武陵区" }, { "value": 1451, "label": "汉寿县" }, { "value": 1456, "label": "津市市" }, { "value": 1452, "label": "澧县" }, { "value": 1455, "label": "石门县" }, { "value": 1449, "label": "鼎城区" } ] }, { "value": 1457, "label": "郴州市", "children": [ { "value": 1464, "label": "临武县" }, { "value": 1458, "label": "北湖区" }, { "value": 1463, "label": "嘉禾县" }, { "value": 1467, "label": "安仁县" }, { "value": 1461, "label": "宜章县" }, { "value": 1466, "label": "桂东县" }, { "value": 1460, "label": "桂阳县" }, { "value": 1462, "label": "永兴县" }, { "value": 1465, "label": "汝城县" }, { "value": 1459, "label": "苏仙区" }, { "value": 1468, "label": "资兴市" } ] }, { "value": 1469, "label": "衡阳市", "children": [ { "value": 1474, "label": "南岳区" }, { "value": 1481, "label": "常宁市" }, { "value": 1470, "label": "珠晖区" }, { "value": 1472, "label": "石鼓区" }, { "value": 1479, "label": "祁东县" }, { "value": 1480, "label": "耒阳市" }, { "value": 1473, "label": "蒸湘区" }, { "value": 1478, "label": "衡东县" }, { "value": 1476, "label": "衡南县" }, { "value": 1477, "label": "衡山县" }, { "value": 1475, "label": "衡阳县" }, { "value": 1471, "label": "雁峰区" } ] }, { "value": 1482, "label": "怀化市", "children": [ { "value": 1484, "label": "中方县" }, { "value": 1488, "label": "会同县" }, { "value": 1490, "label": "新晃侗族自治县" }, { "value": 1485, "label": "沅陵县" }, { "value": 1494, "label": "洪江市" }, { "value": 1487, "label": "溆浦县" }, { "value": 1491, "label": "芷江侗族自治县" }, { "value": 1486, "label": "辰溪县" }, { "value": 1493, "label": "通道侗族自治县" }, { "value": 1492, "label": "靖州苗族侗族自治县" }, { "value": 1483, "label": "鹤城区" }, { "value": 1489, "label": "麻阳苗族自治县" } ] }, { "value": 1495, "label": "娄底市", "children": [ { "value": 1499, "label": "冷水江市" }, { "value": 1497, "label": "双峰县" }, { "value": 1496, "label": "娄星区" }, { "value": 1498, "label": "新化县" }, { "value": 1500, "label": "涟源市" } ] }, { "value": 1501, "label": "邵阳市", "children": [ { "value": 1504, "label": "北塔区" }, { "value": 1502, "label": "双清区" }, { "value": 1512, "label": "城步苗族自治县" }, { "value": 1503, "label": "大祥区" }, { "value": 1511, "label": "新宁县" }, { "value": 1506, "label": "新邵县" }, { "value": 1513, "label": "武冈市" }, { "value": 1509, "label": "洞口县" }, { "value": 1510, "label": "绥宁县" }, { "value": 1505, "label": "邵东县" }, { "value": 1507, "label": "邵阳县" }, { "value": 1508, "label": "隆回县" } ] }, { "value": 1514, "label": "湘潭市", "children": [ { "value": 1516, "label": "岳塘区" }, { "value": 1518, "label": "湘乡市" }, { "value": 1517, "label": "湘潭县" }, { "value": 1515, "label": "雨湖区" }, { "value": 1519, "label": "韶山市" } ] }, { "value": 1520, "label": "湘西土家族苗族自治州", "children": [ { "value": 1525, "label": "保靖县" }, { "value": 1523, "label": "凤凰县" }, { "value": 1526, "label": "古丈县" }, { "value": 1521, "label": "吉首市" }, { "value": 1527, "label": "永顺县" }, { "value": 1522, "label": "泸溪县" }, { "value": 1524, "label": "花垣县" }, { "value": 1528, "label": "龙山县" } ] }, { "value": 1529, "label": "益阳市", "children": [ { "value": 1532, "label": "南县" }, { "value": 1534, "label": "安化县" }, { "value": 1533, "label": "桃江县" }, { "value": 1535, "label": "沅江市" }, { "value": 1530, "label": "资阳区" }, { "value": 1531, "label": "赫山区" } ] }, { "value": 1536, "label": "永州市", "children": [ { "value": 1540, "label": "东安县" }, { "value": 1538, "label": "冷水滩区" }, { "value": 1541, "label": "双牌县" }, { "value": 1544, "label": "宁远县" }, { "value": 1546, "label": "新田县" }, { "value": 1547, "label": "江华瑶族自治县" }, { "value": 1543, "label": "江永县" }, { "value": 1539, "label": "祁阳县" }, { "value": 1537, "label": "芝山区" }, { "value": 1545, "label": "蓝山县" }, { "value": 1542, "label": "道县" } ] }, { "value": 1548, "label": "岳阳市", "children": [ { "value": 1557, "label": "临湘市" }, { "value": 1550, "label": "云溪区" }, { "value": 1553, "label": "华容县" }, { "value": 1551, "label": "君山区" }, { "value": 1552, "label": "岳阳县" }, { "value": 1549, "label": "岳阳楼区" }, { "value": 1555, "label": "平江县" }, { "value": 1556, "label": "汨罗市" }, { "value": 1554, "label": "湘阴县" } ] }, { "value": 1558, "label": "张家界市", "children": [ { "value": 1561, "label": "慈利县" }, { "value": 1562, "label": "桑植县" }, { "value": 1560, "label": "武陵源区" }, { "value": 1559, "label": "永定区" } ] }, { "value": 1563, "label": "株洲市", "children": [ { "value": 1567, "label": "天元区" }, { "value": 1569, "label": "攸县" }, { "value": 1568, "label": "株洲县" }, { "value": 1571, "label": "炎陵县" }, { "value": 1566, "label": "石峰区" }, { "value": 1565, "label": "芦淞区" }, { "value": 1570, "label": "茶陵县" }, { "value": 1564, "label": "荷塘区" }, { "value": 1572, "label": "醴陵市" } ] } ] }, { "value": 1573, "label": "吉林", "children": [ { "value": 1574, "label": "长春市", "children": [ { "value": 1582, "label": "九台市" }, { "value": 1578, "label": "二道区" }, { "value": 1581, "label": "农安县" }, { "value": 1575, "label": "南关区" }, { "value": 1580, "label": "双阳区" }, { "value": 1576, "label": "宽城区" }, { "value": 1584, "label": "德惠市" }, { "value": 1577, "label": "朝阳区" }, { "value": 1583, "label": "榆树市" }, { "value": 1579, "label": "绿园区" } ] }, { "value": 1585, "label": "白城市", "children": [ { "value": 1590, "label": "大安市" }, { "value": 1586, "label": "洮北区" }, { "value": 1589, "label": "洮南市" }, { "value": 1588, "label": "通榆县" }, { "value": 1587, "label": "镇赉县" } ] }, { "value": 1591, "label": "白山市", "children": [ { "value": 1597, "label": "临江市" }, { "value": 1592, "label": "八道江区" }, { "value": 1593, "label": "抚松县" }, { "value": 1596, "label": "江源县" }, { "value": 1595, "label": "长白朝鲜族自治县" }, { "value": 1594, "label": "靖宇县" } ] }, { "value": 1598, "label": "吉林市", "children": [ { "value": 1602, "label": "丰满区" }, { "value": 1599, "label": "昌邑区" }, { "value": 1605, "label": "桦甸市" }, { "value": 1603, "label": "永吉县" }, { "value": 1607, "label": "磐石市" }, { "value": 1606, "label": "舒兰市" }, { "value": 1601, "label": "船营区" }, { "value": 1604, "label": "蛟河市" }, { "value": 1600, "label": "龙潭区" } ] }, { "value": 1608, "label": "辽源市", "children": [ { "value": 1611, "label": "东丰县" }, { "value": 1612, "label": "东辽县" }, { "value": 1610, "label": "西安区" }, { "value": 1609, "label": "龙山区" } ] }, { "value": 1613, "label": "四平市", "children": [ { "value": 1617, "label": "伊通满族自治县" }, { "value": 1618, "label": "公主岭市" }, { "value": 1619, "label": "双辽市" }, { "value": 1616, "label": "梨树县" }, { "value": 1615, "label": "铁东区" }, { "value": 1614, "label": "铁西区" } ] }, { "value": 1620, "label": "松原市", "children": [ { "value": 1624, "label": "乾安县" }, { "value": 1622, "label": "前郭尔罗斯蒙古族自治县" }, { "value": 1621, "label": "宁江区" }, { "value": 1625, "label": "扶余县" }, { "value": 1623, "label": "长岭县" } ] }, { "value": 1626, "label": "通化市", "children": [ { "value": 1627, "label": "东昌区" }, { "value": 1628, "label": "二道江区" }, { "value": 1631, "label": "柳河县" }, { "value": 1632, "label": "梅河口市" }, { "value": 1630, "label": "辉南县" }, { "value": 1629, "label": "通化县" }, { "value": 1633, "label": "集安市" } ] }, { "value": 1634, "label": "延边朝鲜族自治州", "children": [ { "value": 1640, "label": "和龙市" }, { "value": 1636, "label": "图们市" }, { "value": 1642, "label": "安图县" }, { "value": 1635, "label": "延吉市" }, { "value": 1637, "label": "敦化市" }, { "value": 1641, "label": "汪清县" }, { "value": 1638, "label": "珲春市" }, { "value": 1639, "label": "龙井市" } ] } ] }, { "value": 1643, "label"Vue 实现省市区三级联动选择（附带JSON数据）相关推荐
- javascript 省市区三级联动 附： json数据
html: <label><span>购买地址</span><select name="PurchaseProvince" style=& ...
- 省市区三级联动选择组件前端实现
一 代码 <template><el-dialog:title="!dataForm.id ? '新增' : !disabled ? '修改' : '查看'":c ...
- 【Android笔记】使用v5.2.2最新版CityPickerView实现省市区三级联动选择
目录 1. CityPickerView开源框架简介 2. CityPickerView在Android程序中的使用 2.1 build.gradle(Module:app)添加依赖 2.1.1 安装 ...
- web 端 省市区三级联动选择框
web 端 省市区三级联动选择框 <!DOCTYPE html> <html lang="en"> <head><meta charset ...
- 根据参数显示类别（三级联动，需要JSON数据）
根据参数显示类别(三级联动,需要JSON数据) Scripts/Category.js 调用方法: $(function () { BindCategory(); //默认绑定文本框中的值 BindC ...
- vue实现省市区三级联动地址选择组件
昨天收到一个新的需求,需要选择地址,因此就要做一个省市区三级联动的组件来使用,在网上找了一些资源,然后进行了尝试,没想到就这么成功了!要记录一下方便后续使用. 效果如下: 下面就记录一下代码叭! 一 ...
- vue实现省市区三级联动地址选择
导航 利用select下拉框实现 CV通道 省市区三级json 凑字数 之前由于产品需求,自己去实现了省市区三级联动的选择,但是总感觉有所欠缺,后来花了一点时间整理,特此分享下我的思路,望大佬们指教. ...
- vue省市区三级联动mysql,js/json,html/jsp
大家好,我是烤鸭: 省市区三级联动数据及页面: 测试的时候,发现少了几个地区,现在补上了,也优化了下排版. 如果你懒得复制和看的话,这里是打包的下载地址. 之前的资源地址也改了,http://down ...
- 【工具】2020.10全国省市区三级联动行政区划码Mysql数据，带电话区号，邮编，拼音，简称，经纬度，城市等级
全国省市区三级联动行政区划码Mysql8.0.20版本数据 以后用到直接拿就行了,下面有图 sys_area.sql下载地址0积分 犹豫mysql版本不同,可能编码不一样,导入到sql时可能出现的问题 ...
- android studio 测试地址三级联动的时候 json数据太长 提示错误: 常量字符串过长
在项目中应用地址三级联动的时候 因为测试给了一大窜的json数据 就在项目中创建了一个常量 保存这个json 然后在专程bean 去应用 但是提示错误: 常量字符串过长 于是该用jso ...
最新文章
- Struts2和SpringMVC简单配置以及区别总结
- 您为了什么而学？【一入红尘深似海 勿负天下有心人】
- JVM调优：-XX:+UseConcMarkSweepGC 使用CMS垃圾回收器
- SAP Spartacus cxOutlet 里的 templatesRefs 的填充逻辑
- 五、手动取消ajax请求 解决重复发送请求问题
- 计算机应用基础word试题,计算机应用基础Word试题.doc
- 机器学习解决问题思路 — 词嵌入矩阵E对于NLP问题的重要性
- 深入理解jsonp跨域请求原理
- 贪心算法无重叠区间c语言,贪心算法之区间问题.md
- 如何用word制作自己想要的硬笔字帖
- CP2102 USB转串口驱动下载
- 无线路由器怎么改密码
- 自学编程和计算机科班出身的差别在哪里？
- loj3059/bzoj5494/洛谷P5294 [HNOI2019]序列 单调栈+主席树
- 用友系统客户端登录不上服务器,客户端不能登录服务器-用友U8
- 计算机网口速率修改,win7系统修改无线网卡连接速率的操作方法
- mac连接wifi无ip/无法访问网络
- 为啥linux识别螃蟹驱动,螃蟹卡 RTL8168 更新驱动解决 BBR 单线程限速
- storm 2.2.1 java + idea实现wordcount
- c语言 at指令gprs,gprs AT 指令