How to realize the non-select drop-down frame version of the three-level linkage of provinces, cities and regions by js

This article mainly introduces js how to achieve the provincial, municipal and regional three-level linkage non-select drop-down box version, has a certain reference value, interested friends can refer to, I hope you can learn a lot after reading this article, the following let the editor take you to understand it.

Effect.

The code is as follows. Xiaobai's writing is a little messy. Just take a look at what you want to see.

1.html code

Provinces, cities and autonomous regions

2.css code

.box {width: 800px; height: 50px; margin: 20px auto; background-color: rgb (48,49,48); border-radius: 10px; display: flex; justify-content: center; align-items: center;} .box section {display: inline-block Background-color: rgb (168,165,165); flex-grow: 1; height: 30px; margin-right: 10px; margin-left: 10px; border-radius: 5px; line-height: 30px; padding-left: 10px;} .box section:hover {cursor: pointer } .si {display: none;} .box .all {display: block; width: 740px; background-color: rgb (211,203,203); padding: 20px; position: absolute; border-radius: 10px; top: 57px } .box .all: hover {cursor: pointer;} .box .all span {display: inline-block; width: 130px; height: 30px; font-size: 13px; padding-left: 10px; line-height: 30px; border-radius: 5px Margin-left: 10px; border: 1px solid # 000; background-color: white; box-sizing: border-box; margin-top: 10px;}

3.js code

/ / get content var data = city_code// this is my data / / get provinces and municipalities var province = document.querySelector (".cities") var city = document.querySelector (".city") var area = document.querySelector (".area") / / get hidden div var si = document.querySelector (".si") province.addEventListener ("mouseover") Function () {si.classList.add ("all") / / Select province var html = "" var all = document.querySelector (".all") for (var I = 0 I