您的位置：首页 > Web前端 > JavaScript

JavaScript省市联动案例

2018-04-01 17:25 483 查看

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
var cities;
window.onload=function(){
//模拟查询所有的城市
cities=[
["石家庄","保定","廊坊"],
["广州","东莞","佛山"],
["南宁","桂林","玉林"]
];
}
function change(){
//获取省份
var select1=document.getElementById("province");
//获取选中省份的序号
var n=select1.value;
//获取该省份所对应的城市
var pcities=cities
;
//删除旧的城市
var select2=document.getElementById("city");
select2.innerHTML="<option>请选择</option>"
//var options=select2.getElementsByTagName("option");
//for(var i=options.length-1;i>0;i--){
//	select2.removeChild(options[i]);
//}
//追加新的城市
if(pcities){
for(var i=0;i<pcities.length;i++){
var option=document.createElement("option");
option.innerHTML=pcities[i];
select2.appendChild(option);
}
}
}
</script>
</head>
<body>
省:
<select onchange="change()" id="province">
<option value="-1">请选择</option>
<option value="0">河北省</option>
<option value="1">广东省</option>
<option value="2">广西省</option>
</select>
市:
<select id="city">
<option>请选择</option>
</select>
</body>
</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航