您的位置：首页 > 其它

省市联动的简单实现

2016-07-17 09:52 405 查看

省市联动简单实现，适合初学者参考

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>三级联动</title>
<script type="text/javascript">

var provinceArr=['新疆','山东','上海'];
var city=[
['乌鲁木齐','库尔勒','伊犁','喀什','和田'],
['济南','潍坊','青岛','烟台'],
['浦东','闵行','南汇']
];
window.onload=function(){

var body=document.getElementById('container');
//添加省
addSelect(body,'provinces',provinceArr);
//省select对象
var provincesObj =document.getElementById('provinces');
//添加城市
addSelect(body,'city',city[0]);
//时间处理
provincesObj.onchange=function(){
var cityObj =document.getElementById('city');
if(cityObj!=null){
body.removeChild(cityObj);
}
addSelect(body,'city',city[this.value]);
};

}

function addSelect(element,id,arr){
var selectElem=document.createElement('select');
selectElem.id=id;
for(var opt in arr){
var optionObj=document.createElement('option');
optionObj.value=opt;
var optionText=document.createTextNode(arr[opt]);
optionObj.appendChild(optionText);
selectElem.appendChild(optionObj);
}
element.appendChild(selectElem);
}

</script>

<style type="text/css">
body,select,option{
margin: 0;
padding: 0;
}
#container{
width: 300px;
height: 200px;
margin: 40px auto;
font: 14px "微软雅黑";
}
select{
width: 120px;
margin: 10px;
height: 30px;
line-height: 30px;
font: 15px "微软雅黑";
}
</style>
</head>
<body>
<div id="container">

</div>

</body>

</html>

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

标签：

相关文章推荐

新的分享

章节导航