Province and city linkage menu implemented by JavaScript two-dimensional array_javascript skills

Copy code The code is as follows: Insert title here //Initialize a two-dimensional array to store city list items var cities=[ ["Anqing","Hefei","Tongcheng"], ["Shijiazhuang","Baoding" ","Tangshan"], ["Zhengzhou","Luoyang","Kaifeng"] ]; //When a province is selected, call the method of adding a city function provinceChanged( sel){ //alert("select length" sel.options.length); //sel is actually the select object //Traverse the options collection and find the selected option for( var x=0;x { var opt=sel.options[x]; if(opt.selected) { // Add option to the selected city's selection addCityToSelect(x) } } } //Add the city item under the selected province to the city's selection function addCityToSelect (x){ //Find the corresponding city from the two-dimensional array var city=cities[x-1]; var citySelect=document.getElementById("select_city"); /*==================Delete elements that already exist in the node================ On the second or When the method is called for the nth time, the previously added nodes have been added to the city select object, so it is cleared. Idea 1: select object’s removeChild(), so byte points can be deleted through loop traversal. Idea 2: Directly setting select.options.length=1 can achieve the same effect. */ //Set the options length under the city’s select object to 1 citySelect.options.length=1; //Set the length of the options collection and delete //citySelect .options.length=1; for(var x=0;x { //Create element node object var optionName=document.createElement("option "); //Set the display content for option optionName.innerHTML=city[x]; //Add the created option to select citySelect.appendChild(optionName); /* In this place, add all the cities under a certain province to the citySelect object When the second province is selected for the second time, all the cities under the second province will be added. Go below the citySelect node. This effect is wrong. Therefore, it is required to clear the content under the citySelect node before each addition. Next look: ==================Delete elements that already exist in the node=============== * / } } passes the object itself as a parameter in order to operate on it. --> option>Henan Please select a city

Php8, I'm coming too

Learn website layout in 30 minutes

Shangguan Oracle Beginner to Proficient Video Tutorial

Your first line of UNI-APP code

Flutter from scratch to app launch

Brother Lian New Linux Video Tutorial

AXURE 9 Video Tutorial (Suitable for Product Manager Interactive Product Design UI)

Zero Basic Proficiency PS Video Tutorial

16 day UI video tutorial to get you started

PS Techniques and Slicing Techniques Video Tutorial

Alibaba Cloud Environment Construction and Project Launch Video Tutorial

Overview of Computer Networks - Basic Knowledge that Programmers Must Master

Essential Tutorial for Programmers - HTTP Protocol Explanation

Websocket Video Tutorial

Province and city linkage menu implemented by JavaScript two-dimensional array_javascript skills