Loading... # 多级联动效果 ## 内嵌网页效果 <iframe height = 850 width = 90% src="https://lolisis.com/usr/uploads/2023/11/4240881309.html" frameborder=0 allowfullscreen> </iframe> ## 代码 ```html <iframe height = 850 width = 90% src="https://lolisis.com/usr/uploads/2023/11/4240881309.html" frameborder=0 allowfullscreen> </iframe> ``` # 制作方法 ## 按照需要的效果制作网页 这里的需求是二级联动，那么就制作一个二级联动的网页，这里大家可以把[网页下载下来][1]。 关于多级联动的制作，[参考了这位大佬的教程][2]，不过他的代码有点小问题 ```html var province = document.getElementById("province"); var city = document.getElementById("city"); var hospital = document.getElementById("hospital"); //用这个办法进行定义 <select id="province"></select> <select id="city"></select> <label id="hospital"></label> ``` 选单联动的效果本身比较简单，核心就是： ```html province.onchange = function (){ selectedProvince = province[province.selectedIndex].value; //注意，这个province.selectedIndex是从0-n的数字，表示选择了第几个，需要用value转换成值才能用，之后就用这个值去查找。 // 用for循环查找、填充符合的二级表单选项 } ``` 除去表单的自动填充外，也可以填充文字效果 ```html <script> // 城市选择框改变时，更新医院 city.onchange = function () { var city_value = city[city.selectedIndex].value //获取选择的城市名 for (var i = 0; i < cityData.length; i++) { if (city_value == cityData[i].name) { selectedCity = cityData[i]; break; }; } //获取城市对应的医院名 var tmp = ""; for (var i = 0; i < selectedCity.hospitals.length; i++) { tmp += "<h5>" + selectedCity.hospitals[i] + "</h5>"; var hospitalLocation; for (var j = 0; j < hospitalData.length; j++) { if (selectedCity.hospitals[i] == hospitalData[j].name) { hospitalLocation = hospitalData[j].location; break; };//获取医院对应的地址名 } tmp += "<text>" + hospitalLocation + "<text>"; } hospital.innerHTML = tmp }; </script> ``` 目前我就学会了这么多，我之前也没有写过html和java代码。 [1]: https://lolisis.com/usr/uploads/2023/11/4240881309.html [2]: https://blog.51cto.com/u_16175500/7046072 最后修改：2023 年 11 月 14 日 © 允许规范转载 赞 如果觉得我的文章对你有用，留个言就可以了