Front end similar chain home city selection (without three-level linkage) array

Keywords: IE

A pot of tea, a pack of cigarettes, a code change a day

Xiaobai's self summary of the project at the end of the term, without optimization, just realized the function, a little spicy chicken, changed for 8 hours, and finally changed it! (forgive me for my poor logical thinking), the code is as follows: I hope you guys can give me some advice

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<meta http-equiv="X-UA-Compatible" content="ie=edge">

<title>Document</title>

<style>

#are{

height:400px;

width:400px;

border: 1px solid #CCC;

list-style-type: none;

font-size:14px;

}

li{

display: inline-block;

margin:4px;

}

#are li a{

text-decoration: none;

}

</style>

</head>

<body>



Beijing



<ul id="are">

North China:

<li><a href="#"></a></li>

<li><a href="#"></a></li>

<li><a href="#"></a></li>

<li><a href="#"></a></li>

<li><a href="#"></a></li>

<li><a href="#"></a></li>

<li><a href="#"></a></li>

<li><a href="#"></a></li>

<li><a href="#"></a></li>

<li><a href="#"></a></li>

<li><a href="#"></a></li>

<li><a href="#"></a></li>

East China:

<li><a href="#"></a></li>

<li><a href="#"></a></li>

<li><a href="#"></a></li>

<li><a href="#"></a></li>

<li><a href="#"></a></li>

<li><a href="#"></a></li>

<li><a href="#"></a></li>

<li><a href="#"></a></li>

<li><a href="#"></a></li>

<li><a href="#"></a></li>

<li><a href="#"></a></li>

<li><a href="#"></a></li>

<li><a href="#"></a></li>

<li><a href="#"></a></li>

South China:

<li><a href="#"></a></li>

<li><a href="#"></a></li>

<li><a href="#"></a></li>

<li><a href="#"></a></li>

<li><a href="#"></a></li>

<li><a href="#"></a></li>

<li><a href="#"></a></li>

<li><a href="#"></a></li>

<li><a href="#"></a></li>

<li><a href="#"></a></li>

<li><a href="#"></a></li>

<li><a href="#"></a></li>

<li><a href="#"></a></li>

<li><a href="#"></a></li>

West China:

<li><a href="#"></a></li>

<li><a href="#"></a></li>

<li><a href="#"></a></li>

<li><a href="#"></a></li>

<li><a href="#"></a></li>

<li><a href="#"></a></li>

<li><a href="#"></a></li>

<li><a href="#"></a></li>

<li><a href="#"></a></li>

</ul>

<div id="aspan">































</div>

</body>

<script>

var arr=["Beijing", ["Dongcheng District","Xicheng District","Chaoyang District","Fengtai District","Shijingshan District","Haidian District","Mentougou District","Fangshan District","Tongzhou District","Yanqing District"],

"Tianjin",["Heping District","Hedong District","Hexi District","Nankai District","River opening area","Hongqiao District","Binhai New Area","Dongli District","Xiqing District","Jinnan District","Beichen District"],

"Dalian",["Don't bother typing!","Understand","It's not easy.","Please:","Beijing","Tianjin","Shanghai","Ji'nan","Shenzhen","Chengdu","Thankyou!"],

"Shijiazhuang",["Don't bother typing!","Understand","It's not easy.","Please:","Beijing","Tianjin","Shanghai","Ji'nan","Shenzhen","Chengdu","Thankyou!"],

"Harbin",["Don't bother typing!","Understand","It's not easy.","Please:","Beijing","Tianjin","Shanghai","Ji'nan","Shenzhen","Chengdu","Thankyou!"],

"Shenyang",["Don't bother typing!","Understand","It's not easy.","Please:","Beijing","Tianjin","Shanghai","Ji'nan","Shenzhen","Chengdu","Thankyou!"],

"Taiyuan",["Don't bother typing!","Understand","It's not easy.","Please:","Beijing","Tianjin","Shanghai","Ji'nan","Shenzhen","Chengdu","Thankyou!"],

"Changchun",["Don't bother typing!","Understand","It's not easy.","Please:","Beijing","Tianjin","Shanghai","Ji'nan","Shenzhen","Chengdu","Thankyou!"],

"Weihai",["Don't bother typing!","Understand","It's not easy.","Please:","Beijing","Tianjin","Shanghai","Ji'nan","Shenzhen","Chengdu","Thankyou!"],

"Weifang",["Don't bother typing!","Understand","It's not easy.","Please:","Beijing","Tianjin","Shanghai","Ji'nan","Shenzhen","Chengdu","Thankyou!"],

"Hohhot",["Don't bother typing!","Understand","It's not easy.","Please:","Beijing","Tianjin","Shanghai","Ji'nan","Shenzhen","Chengdu","Thankyou!"],

"Baotou",["Don't bother typing!","Understand","It's not easy.","Please:","Beijing","Tianjin","Shanghai","Ji'nan","Shenzhen","Chengdu","Thankyou!"],

"Shanghai",["Huangpu District","Xuhui District","Changning District","Jingan District","Putuo District","Hongkou District","Yangpu District","Minhang District","Baoshan District","Jiading District","Pudong New Area","Jinshan District"],

"Hangzhou",["Don't bother typing!","Understand","It's not easy.","Please:","Beijing","Tianjin","Shanghai","Ji'nan","Shenzhen","Chengdu","Thankyou!"],

"Suzhou",["Don't bother typing!","Understand","It's not easy.","Please:","Beijing","Tianjin","Shanghai","Ji'nan","Shenzhen","Chengdu","Thankyou!"],

"Nanjing",["Don't bother typing!","Understand","It's not easy.","Please:","Beijing","Tianjin","Shanghai","Ji'nan","Shenzhen","Chengdu","Thankyou!"],

"Wuxi",["Don't bother typing!","Understand","It's not easy.","Please:","Beijing","Tianjin","Shanghai","Ji'nan","Shenzhen","Chengdu","Thankyou!"],

"Ji'nan",["Lixia District","Shizhong District","Huaiyin District","Licheng District","Flyover area","Changqing District","Pingyin County","Jiyang County","Shanghe County","Zhangqiu County"],

"Qingdao",["Don't bother typing!","Understand","It's not easy.","Please:","Beijing","Tianjin","Shanghai","Ji'nan","Shenzhen","Chengdu","Thankyou!"],

"Kunshan",["Don't bother typing!","Understand","It's not easy.","Please:","Beijing","Tianjin","Shanghai","Ji'nan","Shenzhen","Chengdu","Thankyou!"],

"Ningbo",["Don't bother typing!","Understand","It's not easy.","Please:","Beijing","Tianjin","Shanghai","Ji'nan","Shenzhen","Chengdu","Thankyou!"],

"Nanchang",["Don't bother typing!","Understand","It's not easy.","Please:","Beijing","Tianjin","Shanghai","Ji'nan","Shenzhen","Chengdu","Thankyou!"],

"Fuzhou",["Don't bother typing!","Understand","It's not easy.","Please:","Beijing","Tianjin","Shanghai","Ji'nan","Shenzhen","Chengdu","Thankyou!"],

"Hefei",["Don't bother typing!","Understand","It's not easy.","Please:","Beijing","Tianjin","Shanghai","Ji'nan","Shenzhen","Chengdu","Thankyou!"],

"Xuzhou",["Don't bother typing!","Understand","It's not easy.","Please:","Beijing","Tianjin","Shanghai","Ji'nan","Shenzhen","Chengdu","Thankyou!"],

"Zibo",["Don't bother typing!","Understand","It's not easy.","Please:","Beijing","Tianjin","Shanghai","Ji'nan","Shenzhen","Chengdu","Thankyou!"],

"Shenzhen",["Luohu District","Futian District","Nanshan District","Baoan District","Longgang District","Yantian District","Guangming New District","Longhua New District","Pingshan New Area","Dapeng New District","Shenzhen Shantou Special Cooperation Zone"],

"Guangzhou",["Don't bother typing!","Understand","It's not easy.","Please:","Beijing","Tianjin","Shanghai","Ji'nan","Shenzhen","Chengdu","Thankyou!"],

"Foshan",["Don't bother typing!","Understand","It's not easy.","Please:","Beijing","Tianjin","Shanghai","Ji'nan","Shenzhen","Chengdu","Thankyou!"],

"Changsha",["Don't bother typing!","Understand","It's not easy.","Please:","Beijing","Tianjin","Shanghai","Ji'nan","Shenzhen","Chengdu","Thankyou!"],

"Sanya",["Don't bother typing!","Understand","It's not easy.","Please:","Beijing","Tianjin","Shanghai","Ji'nan","Shenzhen","Chengdu","Thankyou!"],

"Huizhou",["Don't bother typing!","Understand","It's not easy.","Please:","Beijing","Tianjin","Shanghai","Ji'nan","Shenzhen","Chengdu","Thankyou!"],

"Haikou",["Don't bother typing!","Understand","It's not easy.","Please:","Beijing","Tianjin","Shanghai","Ji'nan","Shenzhen","Chengdu","Thankyou!"],

"Dongguan",["Don't bother typing!","Understand","It's not easy.","Please:","Beijing","Tianjin","Shanghai","Ji'nan","Shenzhen","Chengdu","Thankyou!"],

"Zhuhai",["Don't bother typing!","Understand","It's not easy.","Please:","Beijing","Tianjin","Shanghai","Ji'nan","Shenzhen","Chengdu","Thankyou!"],

"Zhongshan",["Don't bother typing!","Understand","It's not easy.","Please:","Beijing","Tianjin","Shanghai","Ji'nan","Shenzhen","Chengdu","Thankyou!"],

"Xiamen",["Don't bother typing!","Understand","It's not easy.","Please:","Beijing","Tianjin","Shanghai","Ji'nan","Shenzhen","Chengdu","Thankyou!"],

"Nanning",["Don't bother typing!","Understand","It's not easy.","Please:","Beijing","Tianjin","Shanghai","Ji'nan","Shenzhen","Chengdu","Thankyou!"],

"Quanzhou",["Don't bother typing!","Understand","It's not easy.","Please:","Beijing","Tianjin","Shanghai","Ji'nan","Shenzhen","Chengdu","Thankyou!"],

"city in Guangxi",["Don't bother typing!","Understand","It's not easy.","Please:","Beijing","Tianjin","Shanghai","Ji'nan","Shenzhen","Chengdu","Thankyou!"],

"Chengdu",["Jinjiang District","Qingyang District","Jinniu District","Wuhou District","Chenghua District","Longquanyi","Qingbaijiang","Xindu District","Wenjiang District","Jintang County","Shuangliu County","Pixian","Dayi County","Xinjin County"],

"Chongqing",["Don't bother typing!","Understand","It's not easy.","Please:","Beijing","Tianjin","Shanghai","Ji'nan","Shenzhen","Chengdu","Thankyou!","you","also","too","All right.!"],

"Wuhan",["Don't bother typing!","Understand","It's not easy.","Please:","Beijing","Tianjin","Shanghai","Ji'nan","Shenzhen","Chengdu","Thankyou!","you","also","too","All right.!"],

"Zhengzhou",["Don't bother typing!","Understand","It's not easy.","Please:","Beijing","Tianjin","Shanghai","Ji'nan","Shenzhen","Chengdu","Thankyou!","you","also","too","All right.!"],

"Xi'an",["Don't bother typing!","Understand","It's not easy.","Please:","Beijing","Tianjin","Shanghai","Ji'nan","Shenzhen","Chengdu","Thankyou!","you","also","too","All right.!"],

"Kunming",["Don't bother typing!","Understand","It's not easy.","Please:","Beijing","Tianjin","Shanghai","Ji'nan","Shenzhen","Chengdu","Thankyou!","you","also","too","All right.!"],

"Guiyang",["Don't bother typing!","Understand","It's not easy.","Please:","Beijing","Tianjin","Shanghai","Ji'nan","Shenzhen","Chengdu","Thankyou!","you","also","too","All right.!"],

"Lanzhou",["Don't bother typing!","Understand","It's not easy.","Please:","Beijing","Tianjin","Shanghai","Ji'nan","Shenzhen","Chengdu","Thankyou!","you","also","too","All right.!"],

"Luoyang",["Don't bother typing!","Understand","It's not easy.","Please:","Beijing","Tianjin","Shanghai","Ji'nan","Shenzhen","Chengdu","Thankyou!","you","also","too","All right.!"],

];

olist=document.getElementById("list"),

aa=document.getElementsByTagName("a"),

aspan=document.getElementsByTagName("span");

// alert(aspan[0].innerHTML);

var i=0,

index=0,

lastindex=0;

for(var j=0;j<aa.length;j++){

if(typeof arr[i]=="string"){

aa[j].innerHTML=arr[i];

i+=2;

}

}

//What j =???

for(var j=0;j<aa.length;j++){(function(j){

aa[j].onclick=function(){

// console.log(j);

olist.innerHTML=this.innerHTML; //Pass value

i=2*j+1;//Click which to display which key

var brr=arr[i];

// console.log(i);

// console.log(arr[i]);

for(index=0;index<brr.length;i++){

if(typeof brr[index]=="string"){

//The whole for is to give each span a corresponding value!!

for(var b=0;b<brr.length;b++){

aspan[index].innerHTML=brr[b];

// console.log(i);

index++;

}

}

}

}

})(j);

}

</script>

</html>

Click any city in the region box to switch between the top city and the bottom City

ps:1. Clicking the city has redundant other urban areas is an array problem. Unify the length of each subarray. If you don't use "" to get together, you won't make such a mistake. I'm lazy to change it.

2. It is necessary to determine which one is clicked and display the corresponding city area! Function (J) is the function, i is represented by J, i=2*j+1;

(summary after 8 hours: 1. Logical thinking is really too important, or I really want to die and I can't think where I'm wrong)

Posted by PHPslide on Fri, 08 Nov 2019 13:45:09 -0800

Programmer Group

Front end similar chain home city selection (without three-level linkage) array

Hot Keywords