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

Javascript复习第五天二级联动菜单

2016-05-14 15:18 661 查看

4000

这算是比较常用的功能啦~配合暴力增加节点的innerHTML属性~做一个联动菜单

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>Document</title>
<script>
//二级联动菜单
function ld(){
var from = document.getElementById('from');//获取省份
var arr = [
["济南","青岛","烟台","淄博"],
["石家庄","秦皇岛","保定","廊坊","唐山"],
["株洲","湘潭","岳阳","常德","长沙"]
]
var city = document.getElementById('city');//获取城市
var option = "";
//当用户选择后，返回未选择项清空二级联动。
if(from.value < 0){
city.innerHTML = option;
return;
}
//凭用户选择，输出二级联动菜单。
for(i = 0 , len = arr[from.value].length;i < len; i++){
option += "<option value = " + i + ">" + arr[from.value][i] + "</option>";
}
city.innerHTML = option;
}
</script>
</head>
<body>
<select name="fromwhere" id="from" onchange = "ld();">
<option value="-1">请选择</option>
<option value="0">山东</option>
<option value="1">河北</option>
<option value="2">长沙</option>
</select>
<select name="city" id="city">
</select>
</body>
</html>

输出结果：

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

标签： javascript

相关文章推荐

新的分享

章节导航