核心提示：二级联动的下拉列表代码实现教程!DOCTYPE htmlhtmlheadtitle二级联动下拉列表/titlemeta charset=utf-8/headbodyform name=lineands...
二级联动的下拉列表代码实现教程
<!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>
