javascript json写的省市二级联系关系
日期：2014-05-16 浏览次数：20336 次
javascript json写的省市二级关联
<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Insert title here</title>
</head>
<body onload="ale();">
<table>
<tr>
<td>
<select name="province" id="province">
<option>请选择...</option>
</select>
</td>
<td>省</td>
<td>
<select name="city" id="city">
<option>请选择...</option>
</select>
</td>
<td>市</td></tr>
</table>
<script>
window.onload=function(){
/*全国的城市 用json 表示*/
var china = [
{province:"四川",id:"1",city:["成都","西昌","绵阳","广元"]},
{province:"云南",id:"2",city:["昆明","大理","昭通","西双版纳"]}
]
/*获取省的下拉列表*/
var selectone = document.getElementById("province");
/*获取城市的下拉列表*/
var selecttwo = document.getElementById("city");
/*循环获取到所有的省，并在省下拉列表增加对应的节点*/
for(var i = 0;i<china.length;i++){
/*创建省下面的option元素*/
var optionElement = document.createElement("option");
/*给该option元素设置属性 value*/
optionElement.setAttribute("value",china[i].id);
/*给option元素添加文本元素*/
optionElement.innerHTML=china[i].province;
/*把option元素添加到省下拉列表*/
selectone.appendChild(optionElement);
}
/*给省下拉列表添加change事件*/
selectone.onchange = function (){
var id ;
/*获取省下面的所有option元素*/
var options = selectone.getElementsByTagName("option");
for(var i=0;i<options.length;i++){
/*获取到被选中的option元素 并将该选中的option的value值付给id*/
if(options[i].selected){
id = options[i].value;
}
}
/*获取城市下拉列表的option元素*/
var cityElement = selecttwo.getElementsByTagName("option");
/*删除城市下拉列表里面的所有元素 除去请选择 用 反删*/
for(var i=cityElement.length-1;i>0;i--){
selecttwo.removeChild(cityElement[i]);
}
/*循环获取到全国下面的省对应的城市*/
for(var i=0;i<china.length;i++){
/*判断之前的id值与对应的里面的id比较，如果匹配就去相应的省对应下来的城市*/
if(china[i].id==id){
/*获取到省下面的对应的城市数组*/
var citys = china[i].city;
/*再次通过循环在城市下拉列表添加option元素*/
for(var j=0;j<citys.length;j++){
var optionElement = document.createElement("option");
optionElement.setAttribute("value",citys[j]);
optionElement.innerHTML=citys[j];
selecttwo.appendChild(optionElement);
}
}
}
}
}
</script>
</body>
</html>
<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Insert title here</title>
</head>
<body onload="ale();">
<table>
<tr>
<td>
<select name="province" id="province">
<option>请选择...</option>
</select>
</td>
<td>省</td>
<td>
<select name="city" id="city">
<option>请选择...</option>
</select>
</td>
<td>市</td></tr>
</table>
<script>
window.onload=function(){
/*全国的城市 用json 表示*/
var china = [
{province:"四川",id:"1",city:["成都","西昌","绵阳","广元"]},
{province:"云南",id:"2",city:["昆明","大理","昭通","西双版纳"]}
]
/*获取省的下拉列表*/
var selectone = document.getElementById("province");
/*获取城市的下拉列表*/
var selecttwo = document.getElementById("city");
/*循环获取到所有的省，并在省下拉列表增加对应的节点*/
for(var i = 0;i<china.length;i++){
/*创建省下面的option元素*/
var optionElement = document.createElement("option");
/*给该option元素设置属性 value*/
optionElement.setAttribute("value",china[i].id);
/*给option元素添加文本元素*/
optionElement.innerHTML=china[i].province;
/*把option元素添加到省下拉列表*/
selectone.appendChild(optionElement);
}
/*给省下拉列表添加change事件*/
selectone.onchange = function (){
var id ;
/*获取省下面的所有option元素*/
var options = selectone.getElementsByTagName("option");
for(var i=0;i<options.length;i++){
/*获取到被选中的option元素 并将该选中的option的value值付给id*/
if(options[i].selected){
id = options[i].value;
}
}
/*获取城市下拉列表的option元素*/
var cityElement = selecttwo.getElementsByTagName("option");
/*删除城市下拉列表里面的所有元素 除去请选择 用 反删*/
for(var i=cityElement.length-1;i>0;i--){
selecttwo.removeChild(cityElement[i]);
}
/*循环获取到全国下面的省对应的城市*/
for(var i=0;i<china.length;i++){
/*判断之前的id值与对应的里面的id比较，如果匹配就去相应的省对应下来的城市*/
if(china[i].id==id){
/*获取到省下面的对应的城市数组*/
var citys = china[i].city;
/*再次通过循环在城市下拉列表添加option元素*/
for(var j=0;j<citys.length;j++){
var optionElement = document.createElement("option");
optionElement.setAttribute("value",citys[j]);
optionElement.innerHTML=citys[j];
selecttwo.appendChild(optionElement);
}
}
}
}
}
</script>
</body>
</html>
免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。
