思路:首先需要时在页面中添加两个下拉框 ,在下拉框中添加默认值 当选中第一个下拉框的值二个下拉框中的值随之改变为相应的内容 给第一个下拉框添加一个onchange事件 同时还需要获取选中值
需要获取第一个下拉框选中值的下标 需要使用selectedIndex
因为第二个下拉框有默认值所以 在 onchange事件里需要清空第二个下拉框的默认值 然后在添加相应的值
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>二级菜单联动</title>
<script>
var city_data = [
{
"city": "北京市",
"area": [
"东城区",
"西城区",
"朝阳区",
"丰台区",
]
},
{
"city": "天津市",
"area": [
"和平区",
"河东区",
"河西区",
"南开区",
"河北区",
"红桥区",
"东丽区",
"西青区",
"津南区",
]
},
{
"city": "石家庄市",
"area": [
"长安区",
"桥西区",
"新华区",
"井陉矿区",
"裕华区"
]
},]
</script>
</head>
<body>
<script>
// var sel = document.getElementById("sel");
// sel.onchange = function(){
// console.log(this.selectedIndex);
// 优先获取option标签的value属性值,如果没有获取标签中间的内容
// console.log(this.value);
// }
//
//创建一个文档片段 // 当添加都DOM树后 该节点会自动释放 特点是只访问一次DOM树
var flag = document.createDocumentFragment();
//创建一个city城市select控件
var select = document.createElement("select");
//给当前创建的控件添加一个Id
select.id = "city";
//遍历出所有的城市名放在selec控件下
for(var i = 0, length = city_data.length; i < length; i++){
// 创建一个option控件
var option = document.createElement("option");
//设置option的innHTML;
option.innerHTML = city_data[i].city;
// 把option追加到select下
select.appendChild(option);
}
// 把select最佳到文档片段中
flag.appendChild(select);
//创建area下拉框 同创建城市下拉框
var select = document.createElement("select");
select.id = "area";
var arr = city_data[0].area;
for (var j = 0, length1 = arr.length; j < length1;j++ ) {
var option = document.createElement("option");
option.innerHTML = arr[j];
select.appendChild(option);
}
flag.appendChild(select);
// 把文档片段最佳到页面
document.body.appendChild(flag);
// var sel = document.geareaElementsByTagName("select");
// 获取第一个select节点
var selcity = document.getElementById('city');
// 获取第二个select节点
var selarea = document.getElementById('area');
// 给一个下拉框添加onchange事件
selcity.onchange = function(){
console.log(this.selectedIndex); // 获取选择行的下边
// 优先获取option标签的value属性值,如果没有获取标签中间的内容
//
// 清空第二个select节点
selarea.innerHTML="";
// 获取选城市里的区域 放在一个数组中
var arr = city_data[this.selectedIndex].area;
console.log(arr);
// 常见一个文档片段
var flag = document.createDocumentFragment();
// 遍历出区域名
for (var j = 0, length1 = arr.length; j < length1;j++ ) {
创建一个option控件
var option = document.createElement("option");
//设置option的innHTML;
option.innerHTML = arr[j];
// 把option最佳到文档片段下
flag.appendChild(option);
}
// 把文档片段追加在城市区域select
select.appendChild(flag);
}
</script>
</body>
</html>