前言
这个省市区三级联动的HTML网页，大概20天前左右做过一次
当时的代码很屎，也没有考虑会加数据的情况，如果每一次添加数据都要多一次判断
或者多好几行的文案数据，会显得很臃肿，以下是之前的代码
之前的代码
function onShengChanged() {
let temp = chooseShi;
switch(sheng.value) {
case "jl":
temp += "<option value='cc'>长春市</option><option value='jilinshi'>吉林市</option>";
break;
case "ln":
temp += "<option value='sy'>沈阳市</option><option value='dl'>大连市</option>";
break;
default:
break;
}
shi.innerHTML = temp;
qu.innerHTML = chooseQu;
}
注意:下面是以前写的整个省市区的代码，非常的垃，数据多了会增加不可估量的工作量
以前的总代码
<select name="" id="sheng" onchange="onShengChanged()">
<option value="">--请选择省--</option>
<option value="jl">吉林省</option>
<option value="ln">辽宁省</option>
</select>
<select name="" id="shi" onchange="onShiChanged()">
<option value="">--请选择市--</option>
</select>
<select name="" id="qu">
<option value="">--请选择区--</option>
</select>
<script>
let sheng = document.querySelector("#sheng");
let shi = document.querySelector("#shi");
let qu = document.querySelector("#qu");
let chooseSheng = "<option>--请选择省--</option>";
let chooseShi = "<option>--请选择市--</option>";
let chooseQu = "<option>--请选择区--</option>";
function onShengChanged() {
let temp = chooseShi;
switch(sheng.value) {
case "jl":
temp += "<option value='cc'>长春市</option><option value='jilinshi'>吉林市</option>";
break;
case "ln":
temp += "<option value='sy'>沈阳市</option><option value='dl'>大连市</option>";
break;
default:
break;
}
shi.innerHTML = temp;
qu.innerHTML = chooseQu;
}
function onShiChanged() {
let temp = chooseQu;
switch(shi.value) {
case "cc":
temp += "<option>南关区</option><option>宽城区</option><option>朝阳区</option>";
break;
case "jilinshi":
temp += "<option>昌邑区</option><option>丰满区</option><option>船营区</option>";
break;
case "sy":
temp += "<option>和平区</option><option>沈河区</option><option>皇姑区</option>";
break;
case "dl":
temp += "<option>西岗区</option><option>中山区</option><option>沙河口区</option>";
break;
default:
break;
}
qu.innerHTML = temp;
}
</script>从代码上就可以看出来，每次都要判断sheng.value的值，并且要写很多的case
在其中还要给字符串temp每次添加数据，一个省简略写了两个市的信息，实际情况并不是这样
所以我在那天晚上过去之后，第二天的早上就把代码优化了，想要做全国的三级联动(显然很麻烦)
但是数据太难查，很多数据都是付费的，并且省市区都有名字和规划上的变化，导致任务进行的很难
后来也慢慢忘记了这个事情，今天无意间在电脑上发现了这个文件，决定把这个发出来
如果有数据的话，可以按照我的格式进行导入，以下是新算法
新算法
function onChanged(chooseModel,model) {
let Arr,i;
if (document.querySelector('#sheng') == chooseModel) {
Arr=ArrSheng;
}
if (document.querySelector('#shi') == chooseModel) {
Arr=ArrShi;
}
for (i = 0;i < Arr.length; i+=2) {
if(Arr[i] == chooseModel.value) {
write(Arr[i+1],model);
break;
}
}
if (i>=Arr.length) {
if(chooseModel == document.querySelector('#sheng')){
write(null,document.querySelector('#shi'));
}
if(chooseModel == document.querySelector('#shi')){
write(null,document.querySelector('#qu'));
}
}
}
function write(arr,model) {
document.querySelector('#qu').innerHTML = option.replace("xxx","--请选择区--");
if (model == document.querySelector('#shi')) {
model.innerHTML = option.replace("xxx","--请选择市--");
}
if (arr != null) {
for(let i=0;i<arr.length;i++) {
model.innerHTML += option.replace("xxx",arr[i]);
if (document.querySelector('#sheng') == model) {
i++;
}
}
}
}新算法具体优化了什么
- 集合了
onChanged方法，点击哪个框最终都会到onChanged方法中 - 不用每个模块都要判断一次，省去复杂的东西，将
model传参onChanged进去(model指的就是模型，代指你点击到底是省市区的哪个模块)，在内部判断哪个模块被onChanged，然后进行Write - 写入数据更方便，之前的写入数据是一行一行繁琐的
<options>，这种复杂的字符串会把头都搞大，我干脆把每一个省内包含的市放入一个数组内，把一个市包含的所有区也放入一个数组内，通过循环算法来将数据添加进去 - 代码看着更舒服了点，以前写的太乱了哈哈哈
全部代码
HTML全部代码 粘贴代码直接可以使用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body onload="onBodyLoad()">
<select name="" id="sheng" onchange="onChanged(document.querySelector('#sheng'),document.querySelector('#shi'))">
<option value="">--请选择省--</option>
</select>
<select name="" id="shi" onchange="onChanged(document.querySelector('#shi'),document.querySelector('#qu'))">
<option value="">--请选择市--</option>
</select>
<select name="" id="qu">
<option value="">--请选择区--</option>
</select>
<script>
let beijingshengArr = ["东城区","西城区","朝阳区","丰台区","石景山区","海淀区","顺义区","通州区","大兴区","房山区","门头沟区","昌平区","密云区","怀柔区","延庆区"],
tianjingshengArr = ["和平区","河东区","河西区","南开区","河北区","红桥区","滨海新区","东丽区","西青区","津南区","北辰区","武清区","宝坻区","宁河区","静海区","利州区"],
shanghaishengArr = ["黄浦区","徐汇区","长宁区","静安区","普陀区","虹口区","杨浦区","闵行区","宝山区","嘉定区","浦东新区","金山区","松江区","青浦区","奉贤区"],
chongqingshengArr = ["渝中区","万州区","涪陵区","大渡口区","江北区","沙坪坝区","九龙坡区","南岸区","綦江区","大足区","渝北区","巴南区","黔江区","长寿区","江津区","合川区","永川区","璧山区","铜梁区","潼南区","荣昌区","开州区","梁平区"],
anhuishengArr = ["合肥市","安庆市","蚌埠市","濠州市","池州市","滁州市","阜阳市","淮北市","黄山市","六安市","马鞍市","宿州市","铜陵市","芜湖市","宣城市","淮南市"],
fujianshengArr = ["福建市","龙岩市","南平市","宁德市","莆田市","泉州市","三明市","厦门市","漳州市"],
guangdongshengArr = ["广州市","潮州市","东莞市","佛山市","河源市","惠州市","江门市","揭阳市","茂名市","梅州市","清远市","汕头市","汕尾市","韶关市","深圳市","阳江市","云浮市","湛江市","肇庆市","中山市","珠海市"],
guangxishengArr = ["南宁市","百色市","北海市","崇左市","防城港市","桂林市","贵港市","河池市","贺州市","来宾市","柳州市","钦州市","梧州市","玉林市"],
guizhoushengArr = ["贵阳市","安顺市","六盘水市","遵义市","黔西南州","黔东南州","黔南州"],
gansushengArr = ["兰州市","白银市","定西市","甘南州","嘉峪关市","金昌市","酒泉市","临夏州","陇南市","平凉市","庆阳市","天水市","武威市","张掖市"],
hainanshengArr = ["海口市","保亭黎族苗族自治县","昌江黎族自治县","儋州市","澄迈市","东方市","定安市","琼海市","琼中黎族苗族自治县","乐东黎族自治县","临高市","陵水黎族自治县","三亚市","屯昌市","万宁市","文昌市","三沙市"],
henanshengArr = [""],
heilongjiangshengArr =[""],
hubeishengArr = [""],
hunanshengArr = [""],
hebeishengArr =[""],
jiangsushengArr =[""],
jiangxishengArr =[""],
jilinshengArr = ["长春市","吉林市"],
liaoningshengArr = ["沈阳市","大连市"],
ningxiashengArr=[""],
neimenggushengArr=[""],
qinghaishengArr=[""],
shandongshengArr =[""],
shanxishengArr =[""],
shianxishengArr = [""],
sichuanshengArr =[""],
xizangshengArr =[""],
xinjiangshengArr =[""],
yunnanshengArr =[""],
zhejiangshengArr=[""],
// 这个下面都是市的所有区
changchunshiArr =["南关区","宽城区","朝阳区"],
jilinshiArr=["昌邑区","丰满区","船营区"],
shenyangshiArr=["和平区","沈河区","皇姑区"],
dalianshiArr=["西岗区","中山区","沙河口区"];
let ArrSheng = [
"北京",beijingshengArr,"天津",tianjingshengArr,"上海",shanghaishengArr,
"重庆",chongqingshengArr,"安徽省",anhuishengArr,"福建省",fujianshengArr,
"广东省",guangdongshengArr,"广西壮族自治区",guangxishengArr,"贵州省",guizhoushengArr,
"甘肃省",gansushengArr,"海南省",hainanshengArr,"河南省",henanshengArr,
"黑龙江省",heilongjiangshengArr,"湖北省",hubeishengArr,"湖南省",hunanshengArr,
"河北省",hebeishengArr,"江苏省",jiangsushengArr,"江西省",jiangxishengArr,
"吉林省",jilinshengArr,"辽宁省",liaoningshengArr,"宁夏回族自治区",ningxiashengArr,
"内蒙古自治区",neimenggushengArr,"青海省",qinghaishengArr,"山东省",shandongshengArr,
"山西省",shanxishengArr,"陕西省",shianxishengArr,"四川省",sichuanshengArr,
"西藏自治区",xizangshengArr,"云南省",yunnanshengArr,"浙江省",zhejiangshengArr,
"新疆维吾尔自治区",xinjiangshengArr
];
let ArrShi = ["长春市",changchunshiArr,"吉林市",jilinshiArr,"沈阳市",shenyangshiArr,"大连市",dalianshiArr];
let option = "<option>xxx</option>";
function onBodyLoad() {
write(ArrSheng,document.querySelector('#sheng'));
}
function onChanged(chooseModel,model) {
let Arr,i;
if (document.querySelector('#sheng') == chooseModel) {
Arr=ArrSheng;
}
if (document.querySelector('#shi') == chooseModel) {
Arr=ArrShi;
}
for (i = 0;i < Arr.length; i+=2) {
if(Arr[i] == chooseModel.value) {
write(Arr[i+1],model);
break;
}
}
if (i>=Arr.length) {
if(chooseModel == document.querySelector('#sheng')){
write(null,document.querySelector('#shi'));
}
if(chooseModel == document.querySelector('#shi')){
write(null,document.querySelector('#qu'));
}
}
}
function write(arr,model) {
document.querySelector('#qu').innerHTML = option.replace("xxx","--请选择区--");
if (model == document.querySelector('#shi')) {
model.innerHTML = option.replace("xxx","--请选择市--");
}
if (arr != null) {
for(let i=0;i<arr.length;i++) {
model.innerHTML += option.replace("xxx",arr[i]);
if (document.querySelector('#sheng') == model) {
i++;
}
}
}
}
</script>
</body>
</html>最后要说的
其实也没啥要说的，这个文件被我忘了好久，今天才发出来
省市区的数据并不全，如果有数据可以导入一下，按照格式即可(自己查了这么点数据就已经懵了)
其次是命名规则，看代码就知道我这个命名不符合阿里巴巴的命名规则，如果要使用的话记得改一下名字
挺喜欢优化代码的，虽然我只是一只雏鸟，还需要努力才行呢
《干法》--稻盛和夫
所谓“不亚于任何人的努力”，不是说“做到这种程度就行了”，
而是没有终点、永无止境的努力。将目标一次接一次向前推进，就要进行持续的、无限度的努力。