- <!DOCTYPE html>
- <html>
- <head>
- <title > 二级联动下拉列表 </title>
- <meta charset="utf-8">
- </head>
- <body>
- <form name="lineandstation">
线路选择:
- <select name="lines" id="lines" onchange="getStationName()">
- <option value="0"> 请选择线路 </option>
- </select> 站点选择:
- <select name="station">
- <option value="0"> 请选择车站 </option>
- </select>
- </form>
- </body>
- <script type="text/javascript">
- var lineNum = ["101", "102"];
- var collect = document.getElementById("lines")
- var old = collect.innerHTML
- function load() {
- var lineNu = "";
- for (var j = 0; j <lineNum.length; j++) {
- lineNu += '<option>' + lineNum[j] + '</option>';
- }
- collect.innerHTML = old + lineNu;
- } // 网页加载时执行此函数, 为线路选择框动态添加选项
- load();
- var stationName = [
- ["1", "2", "3", "4", "5"],
- ["11", "22", "33", "44","55"]
- ];
- function getStationName() {
- var line_num = document.lineandstation.lines;
- var station_name = document.lineandstation.station;
- var lineStation = stationName[line_num.selectedIndex - 1];
- station_name.length = 1;
- for (var i = 0; i <lineStation.length; i++) {
- station_name[i + 1] = new Option(lineStation[i], lineStation[i]);
- }
} // 为站点选择框根据线路选择框的值动态添加选项
- </script>
- </html>
来源: https://www.2cto.com/kf/201805/747844.html