<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
//Use a two-dimensional array
var allCity=new Array(["China","Russia","America"],
["Hebei Province-Shanxi Province-Hubei Province","Moscow-Saint Roland-Petersburg"," California-California-New York"],
["Beijing-Hebei-Shijiazhuang@Datong-Taiyuan-Linfen@Shiyan-Wuhan-Xiaogan","abc@a1-b1-c1@a2- b2-c2","c1-c11-c111@c2-c22-c222@c3-c33-c333"]);
//allCity[2][contryIndex].split("@")[x].split("-");
//Define nationality
var guoJi;//Nationality
var allContry;//Nationality array
var province;//Provincial capital
var city;//city
var con_a;
var pro_b;
var city_c;
var contryIndex;//Index of nationality
//When the page is loaded, all countries will be displayed and you can choose
window.onload=function(){
//Get the nationality drop-down object
guoJi=document.getElementById("contry");
province=document. getElementById("province");
city=document.getElementById("city");
con_a=document.getElementById("con_a");
pro_b=document.getElementById("pro_b");
city_c=document.getElementById("city_c") ;
allContry=allCity[0];
for(var i=0;i<allContry.length;i++){
//Create a drop-down item
var option=document.createElement("option");
//Add content value drop-down item
option.innerText =allContry[i];
guoJi.insertBefore(option,con_a);
}
}
//When we select an item, we can get the selected nationality
function getContry(){
//Clear other
clearProvince1() before adding the provincial capital;
//Get the index of the selected drop-down item
contryIndex=contry.selectedIndex;
//var conValue= contry.options[index].value;
for(var x=0; x<allContry.length;x++){
if(contryIndex==x){
//The country chooses to take out the provincial capital corresponding to China for China, and at the same time, the provincial capital string Split
var chinaCity=allCity[1][x].split("-");//0,1,2....
//Get the provincial capital drop-down box object, add the provincial capital name
//Create a drop-down item
for( var i=0;i<chinaCity.length;i++){
//Create drop-down item
var option=document.createElement("option");
//Add content value drop-down item
option.innerText=chinaCity[i];
province.insertBefore (option,pro_b);
}
}
}
}
//When we select an item, we can get the selected city
function getProvince(){
//Clear others before adding the provincial capital
clearProvince2();
//Get the index of the selected drop-down item
var index=province.selectedIndex;
//var conValue=contry.options[index].value;
//Country selection Take out the provincial capital corresponding to China for China, and split the provincial capital string at the same time
var pro=allCity[2][contryIndex].split("@");
for(var x=0; x<pro.length;x++){
if(index==x){
//Get the town
var allProvince= pro[x].split("-");
//alert(allProvince[0]);
//Get the provincial capital drop-down box object, add the provincial capital name
/ /Create a drop-down item
for(var i=0;i<allProvince.length;i++){
//Create a drop-down item
var option=document.createElement("option");
//Add content value drop-down item
option.innerText=allProvince[ i];
city.insertBefore(option,city_c);
}
}
}
}
//Clear method
function clearProvince1(){
//Get all child nodes
var allArray=province.childNodes;//Variable
for(var i=0;i<allArray.length;){//i++
if(allArray[i].value=="[not selected]"){
break;//termination
}
//Remove the child node from the parent node
province.removeChild(allArray[i]);
}
}
//Clear method
function clearProvince2 (){
//Get all child nodes
var allArray=city.childNodes;//Variable
for(var i=0;i<allArray.length;){//i++
if(allArray[i].value=="[unselected]"){
break;//termination
}
//move the child node from the parent node
city.removeChild(allArray[i]);
}
}
</script>
</head>
<body>
国籍:
<select id="contry" onchange="getContry()">
<option selected="selected" id="con_a">[未选择]</option>
</select>
省会:
<select id="province" onchange="getProvince()">
<option selected="selected" id="pro_b">[未选择]</option>
</select>
市/镇:
<select id="city">
<option selected="selected" id="city_c">[未选择]</option>
</select>
</body>
</html>