The code copy is as follows:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
//Initialize a 2D array to store the city list item
var cities=[
["Anqing","Hefei","Tongcheng"],
["Shijiazhuang", "Baoding", "Tangshan"],
["Zhengzhou","Luoyang","Kaifeng"]
];
//When selecting a province, call the method to add a city
function provinceChanged(sel){
//alert("select's length"+sel.options.length);
//sel is actually a select object
//Transfer the options collection and find the selected options
for(var x=0;x<sel.options.length;x++)
{
var opt=sel.options[x];
if(opt.selected)
{
//Add an option to the selected city
addCityToSelect(x)
}
}
}
//Add the city item under the selected province to the city select
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 ========================================================================================================================================================================================================================================================================================================================================================================================================================================================================================
When the method is called the second or nth time, the previously added node has been added to the city select object, so it is cleared.
Idea 1: select the removeChild() of the select object, so the word node can be deleted through loop traversal.
Idea 2: Set select.options.length=1 directly to achieve the same effect.
*/
//Set the options length under the select object of the city to 1
citySelect.options.length=1;
//Set the length of the options collection and delete it
//citySelect.options.length=1;
for(var x=0;x<city.length;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 cities under a certain province to the citySelect object
When the second province is selected for the second time, all cities below the second province will be added to
Under the citySelect node. This effect is wrong. So, before each addition,
Clear the contents below the citySelect node. Next look:
=========================== Delete elements that already exist in the node ================
*/
}
}
</script>
</head>
<body>
<select onchange="provinceChanged(this);">
<!--The meaning of this: refers to the select object calling provinceChanged(this), and in this method
Pass the object itself as a parameter to operate on it. -->
<option>Please select province</option>
<option>Anhui</option>
<option>Hebei</option>
<option>Henan</option>
</select>
<select id="select_city">
<option>Please select city</option>
</select>
</body>
</html>