DON树属性添加二级联动复选框

最新推荐文章于 2021-09-21 15:39:45 发布

如梦灬初醒

最新推荐文章于 2021-09-21 15:39:45 发布

阅读量403

点赞数

本文链接：https://blog.csdn.net/TXW6666/article/details/103841803

版权

思路：首先需要时在页面中添加两个下拉框，在下拉框中添加默认值当选中第一个下拉框的值二个下拉框中的值随之改变为相应的内容给第一个下拉框添加一个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>

如梦灬初醒

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
DON树属性添加二级联动复选框

思路：首先需要时在页面中添加两个下拉框，在下拉框中添加默认值当选中第一个下拉框的值二个下拉框中的值随之改变为相应的内容给第一个下拉框添加一个onchange事件同时还需要获取选中值需要获取第一个下拉框选中值的下标需要使用selectedIndex因为第二个下拉框有默认值所以在 onchange事件里需要清空第二个下拉框的默认值然后在添加相应的值<!DOCTYPE html...
复制链接

扫一扫