简单的联动菜单
2015-12-05 22:53
337 查看
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
div{
width: 300px;
height: 300px;
background: red;
}
</style>
</head>
<body>
<select name="" id="shi">
<option value="-1">请选择</option>
<option value="0">广州</option>
<option value="1">深圳</option>
</select>
<select name="" id="qu">
</select>
<script>
var shi = document.getElementById('shi');
var qu = document.getElementById('qu');
shi.addEventListener('change',function(){
if(shi.value == '-1'){
qu.innerHTML = '';
return;
}
var ld = [
['海珠区', '越秀区', '黄浦区', '天河区'],
['福田区', '南山区', '罗湖区', '光明新区']
];
var opt = '';
for(var i = 0,len = ld[shi.value].length; i<len; i++){
opt = opt + '<option value="'+i+'">'+ld[shi.value][i]+'</option>';
}
qu.innerHTML = opt;
},false)
</script>
</body>
</html>
相关文章推荐
- Fragment放置后台很久(Home键退出很长时间),返回时出现Fragment重叠解决方案
- 在eclipse中配置好hadoop的插件后使用DFS遇到的问题
- SQL语句的增删改查
- 技术资料备份(持续更新)
- 分享一百多套开发视频教程的下载地址
- Webstorm常用的快捷键
- Python OpenCV 图片反色、调整大小、遍历、导出txt
- CUDA 7/cuDNN/caffe/DIGITS实战教程
- selenium python (三)鼠标事件
- BZOJ3140: [Hnoi2013]消毒
- 世界是数字的1
- AM3359 U-Boot
- 数据结构实验之查找二:平衡二叉树
- 函数(手写)
- image点击事件
- jquery插件源码function加!是什么意思?
- volatile及指令重排序
- 数组指针,指针数组,二维数组,二维数组的指针
- 高速USB 2.0的CMSIS-DAP调试器:CMSIS-DAP正确打开方式(3月18日更新速度和稳定性)
- free 命令结果完全剖析