html+原生js实现 4级select联动完整实例

最新推荐文章于 2024-09-10 13:54:44 发布

YUJIANYUE

最新推荐文章于 2024-09-10 13:54:44 发布

阅读量562

点赞数

文章标签： javascript ajax 数据库 Powered by 金山文档

本文链接：https://blog.csdn.net/YUJIANYUE/article/details/129700984

版权

<!DOCTYPE html>
<html>
<head>
 <meta charset="UTF-8">
 <title>多级 select 联动</title>
 <style>
 /* 样式表 */
 label { display: block; margin-bottom: 10px; }

 select { display: block; margin-bottom: 10px;}
 </style>
</head>
<body>
 <h1>多级 select 联动</h1>

 <form>
 <div>
 <label for="shen">省份：</label>
 <select id="shen"> </select>
 </div>

 <div>
 <label for="city">城市：</label>
 <select id="city" > </select>
 </div>

 <div>
 <label for="area">县市：</label>
 <select id="area" > </select>
 </div>

 <div>
 <label for="zhen">乡镇：</label>
 <select id="zhen" > </select>
 </div>
 </form>

<script>
var data = [
 {
 "name": "选项1",
 "valx": [
 {
 "name": "选项1-1",
 "valx": [
 {
 "name": "选项1-1-1","valx": ['选项1-1-1-1','选项1-1-1-2']
 },
 {
 "name": "选项1-1-2","valx": ['选项1-1-2-1','选项1-1-2-2']
 }
 ]
 },
 {
 "name": "选项1-2",
 "valx": [
 {
 "name": "选项1-2-1","valx": ['选项1-2-1-1','选项1-2-1-2']
 },
 {
 "name": "选项1-2-2","valx": ['选项1-2-2-1','选项1-2-2-2']
 }
 ]
 }
 ]
 },
 {
 "name": "选项2",
 "valx": [
 {
 "name": "选项2-1",
 "valx": [
 {
 "name": "选项2-1-1","valx": ['选项2-1-1-1','选项2-1-1-2']
 },
 {
 "name": "选项2-1-2","valx": ['选项2-1-2-1','选项2-1-2-2']
 }
 ]
 },
 {
 "name": "选项2-2",
 "valx": [
 {
 "name": "选项2-2-1","valx": ['选项2-2-1-1','选项2-2-1-2']
 },
 {
 "name": "选项2-2-2","valx": ['选项2-2-2-1','选项2-2-2-2']
 }
 ]
 }
 ]
 }
];

var se1 = document.getElementById("shen");
var se2 = document.getElementById("city");
var se3 = document.getElementById("area");
var se4 = document.getElementById("zhen");

for (var i = 0; i < data.length; i++) {
 var option = document.createElement("option");
 option.text = data[i].name;
 se1.add(option);
}

se1.addEventListener("change", function() {
 se2.innerHTML = "";
 var selectedOption = data[se1.selectedIndex];
 for (var i = 0; i < selectedOption.valx.length; i++) {
 var option = document.createElement("option");
 option.text = selectedOption.valx[i].name;
 se2.add(option);
 }
 se2.dispatchEvent(new Event("change"));
});

se2.addEventListener("change", function() {
 se3.innerHTML = "";
 var selectedOption = data[se1.selectedIndex].valx[se2.selectedIndex];
 for (var i = 0; i < selectedOption.valx.length; i++) {
 var option = document.createElement("option");
 option.text = selectedOption.valx[i].name;
 se3.add(option);
 }
 se3.dispatchEvent(new Event("change"));
});

se3.addEventListener("change", function() {
 se4.innerHTML = "";
 var selectedOption = data[se1.selectedIndex].valx[se2.selectedIndex].valx[se3.selectedIndex];
 console.log(selectedOption);
 for (var i = 0; i < selectedOption.valx.length; i++) {
 var option = document.createElement("option");
 option.text = selectedOption.valx[i];//.value
 se4.add(option);
 }
});

se1.dispatchEvent(new Event("change"));

</script>