I haven’t updated my article for a long time. Last week, I had a rest because I was tired, and then I slept till night. After waking up, I cleaned the house. I washed my clothes and went back to sleep. Don’t ask me, ask me sleep is comfortable, hahaha, back to business. Today, we use JS to make a three-level linkage of provincial regions, provincial and urban areas, the three from large to small, automatically updated behind urban areas, in simple terms, I choose the province, he will automatically select the city and district two parts. Locale linkage is a very common feature in Web development. We see it when we fill in our address when shopping, when we buy takeout. This morning I went to play the third injection of vaccine, and then I used the Hebei health code, now have to use health Shaanxi, fill in the information when the use of this three linkage, so today write an article like this, one is fate, the other is to consolidate learning. As we all know, code this thing, a day without a hand. We use JS to make the region three linkage, have to write the HTML inside the drop-down list:

<! -- wechat Official Account: <select id="sheng"> <option value="-1"> Select </option> <select ID ="shi"></select> <select id="qu"></select> <script> <! </script>Copy the code

You’re curious why the value in option is -1. Since option is an option in the drop-down list, and value is the subscript of the corresponding locale array, the array subscript starts at 0, and we start at -1 to avoid locking it to a locale. The next thing we’re going to do is use arrays to preserve locale data.

Var shengArr=[' shaanxi ',' Hebei ']; / var/city array shiArr = [[' xi ', 'baoji], [' city', 'micro']]. / var/area array quArr = [[[' center 'and' lotus lake district], [' weibin district ', 'old area', 'jin tai area]], [[' qiaoxi', 'changan district], [' qiaodong', 'qiaoxi]]]. </script>Copy the code

When I wrote the array, I also searched the area, and everyone knew that I (this baby, geography is really not good, ha ha ha). In the previous section, we used the shengArr one-dimensional array to store provincial data. For cities and districts in the back, shiArr two-dimensional array is used to save cities corresponding to provinces. Similarly, quArr uses three-dimensional array. Let’s take an example. For example, shengArr in Shaanxi [1] preserved all the cities below Shaanxi Province. The next thing we need to do is have it automatically create the provinces drop-down menu:

function createOption(obj,data){ for(var i in data){ var op=new Option(data[i],i); // Create option obj.options.add(op) in the dropdown menu; }} var sheng= document.getelementById ('sheng'); CreateOption (sheng,shengArr);Copy the code

We use the createOption () function to create the specified drop-down menu option. The parameter obj is used to represent the element object of the drop-down list menu, and the parameter data is used to represent the drop-down list options held by the one-dimensional array. Our new is used to instantiate the Option object to create the

Next we’ll implement automatic options for cities. When we finish selecting the province, the city region automatically appears.

Var shi= document.getelementById ('shi'); Function (){shi.options.length=0; CreateOption (shi,shiArr[sheng.value]); };Copy the code

We still can’t realize three-level linkage after watching it. Only when we select the trigger event of the provincial capital, the city can appear directly, but the region within the city is still not displayed. Let’s traverse the array first, add events to the city and try again.

var qu=document.getElementById('qu'); Shi.onchange =function(){qu.options.length=0; CreateOption (qu,quArr[sheng.value][shi.value]); };Copy the code

In this case, we select the province that triggers the event to appear in the city, but if we don’t change the city it won’t appear in the region under the city, what do we do? So we still have some errors in the code above that we need to fix. Let’s revise the events in the province to give him a verdict.

if(sheng.value>=0){ shi.onchange(); }else{qu.options.length=0; // Clear option}Copy the code

Next we use CSS to give it a simple beautification can be. Summary: today the production of provinces and regions of the three-level linkage, mainly master HTML inside the drop-down list SELECT and list items option. You also need to master one-dimensional arrays, two-dimensional arrays, traversing arrays, getting ids, instantiating objects, adding change events, clear options, and so on.