js-城市联动

<!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>

//使用二维数组
var allCity=new Array(["中国","俄罗斯","美国"],
["河北省-山西省-湖北省","莫斯科-圣堡罗兰-彼得堡","加利福利亚-加州-纽约"],
["北京市-河北市-石家庄@大同市-太原市-临汾市@十堰市-武汉市-孝感","a-b-c@a1-b1-c1@a2-b2-c2","c1-c11-c111@c2-c22-c222@c3-c33-c333"]);

//allCity[2][contryIndex].split("@")[x].split("-");
//定义国籍
var guoJi;//国籍
var allContry;//国籍数组
var province;//省会
var city;//城市
var con_a;
var pro_b;
var city_c;

var contryIndex;//国籍的索引

//当页面加载完成将所有的国家显示可选择
window.onload=function(){
//获取国籍下拉对象
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++){
//创建下拉项
var option=document.createElement("option");
//添加内容值下拉项
option.innerText=allContry[i];
guoJi.insertBefore(option,con_a);
}
}

//当我们选择某一项是,能够得到选中国籍
function getContry(){
//添加省会前清除其他
clearProvince1();

//获取被选中的下拉项索引
contryIndex=contry.selectedIndex;
//var conValue=contry.options[index].value;
for(var x=0; x<allContry.length;x++){
if(contryIndex==x){
//国家选择为中国取出中国对应的省会,同时对省会字符串进行拆分
var chinaCity=allCity[1][x].split("-");//0,1,2....
//获取省会下拉框对象,添加省会名称
//创建下拉项
for(var i=0;i<chinaCity.length;i++){
//创建下拉项
var option=document.createElement("option");
//添加内容值下拉项
option.innerText=chinaCity[i];
province.insertBefore(option,pro_b);
}
}
}
}
//当我们选择某一项是,能够得到选城市
function getProvince(){
//添加省会前清除其他
clearProvince2();

//获取被选中的下拉项索引
var index=province.selectedIndex;
//var conValue=contry.options[index].value;
//国家选择为中国取出中国对应的省会,同时对省会字符串进行拆分
var pro=allCity[2][contryIndex].split("@");
for(var x=0; x<pro.length;x++){
if(index==x){
//获取市镇
var allProvince= pro[x].split("-");
//alert(allProvince[0]);
//获取省会下拉框对象,添加省会名称
//创建下拉项
for(var i=0;i<allProvince.length;i++){
//创建下拉项
var option=document.createElement("option");
//添加内容值下拉项
option.innerText=allProvince[i];
city.insertBefore(option,city_c);
}
}
}
}

//清除方法
function clearProvince1(){
//获取所有子节点
var allArray=province.childNodes;//可变的
for(var i=0;i<allArray.length;){//i++

if(allArray[i].value=="[未选择]"){
break;//终止
}
//由父节点移出子节点
province.removeChild(allArray[i]);
}
}
//清除方法
function clearProvince2(){
//获取所有子节点
var allArray=city.childNodes;//可变的
for(var i=0;i<allArray.length;){//i++

if(allArray[i].value=="[未选择]"){
break;//终止
}
//由父节点移出子节点
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>

猜你喜欢