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

onchange事件

2016-06-27 16:34 579 查看

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>onchange事件</title>
</head>
<body>
<select name="" id="p">

</select>

<select name="" id="c">
<option value="0">请选择</option>
</select>

<script type="text/javascript">
var p = document.getElementById('p');//city城市
var c = document.getElementById('c');//city城市

var pros = ['河北省','河南省','山东省','山西省'];
var citys = [];//所有的城市列表
citys[0] = ['石家庄','保定','承德','唐山'];//河北省的市的列表
citys[1] = ['郑州','洛阳','开封','南阳'];
citys[2] = ['济南','济宁','青岛','烟台'];
citys[3] = ['太原','大同','长治','晋中'];

function init(){
//遍历省份
var str = "";
for(var i=0;i<pros.length;i++){
str += "<option value='"+i+"'>"+pros[i]+"</option>";
}
p.innerHTML = str;
}

//执行函数
init();

//当下拉框的值发生改变的时候触发
p.onchange = function(){
//获取当前选中之后下拉框的值
var v = this.value;
//获取城市列表
var cs = citys[v];
//声明变量
var str = "";
//拼接option字符串
for(var i=0;i<cs.length;i++){
str += "<option value='"+i+"'>"+cs[i]+"</option>";
}
///文本设置
c.innerHTML = str;
}

</script>
</body>
</html>

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

标签： onchange事件 js修改事件

相关文章推荐

新的分享

章节导航