纯js下拉列表二级联动

Html

Css


    
        线路选择:
         站点选择：

html,body {
	width:100%;
	height:100%;
	margin:0 0;
}
#list {
	border-top:50px;
	z-index:9999;
	position:absolute;
	z-index:100;
	left:50px;
	top:50px;
	opacity:0.8;
	background-color:#f9f9f9;
}

var lineNum = ["101", "102"];
var collect = document.getElementById("lines")
var old = collect.innerHTML
function aa() {
    var lineNu = " "
    for (var j = 0; j < lineNum.length; j++) {
        lineNu += '<option>' + lineNum[j] + '</option>';
    }
    collect.innerHTML = old + lineNu;
} //网页加载时执行此函数，为线路选择框动态添加选项      
aa();  
var stationName = [
    ["百万庄西口", "百万庄中街", "百万庄东口", "展览路", "阜成门外", "阜成门", "阜成门内", "白塔寺", "西四路口东", "西安门", "北海", "故宫", "沙滩路口西", "美术馆东", "东四路口东", "朝内小街", "朝阳门内", "朝阳门外", "神路街", "东大桥路口东", "关东店", "呼家楼西", "小庄路口东", "红庙路口西", "红庙路口东"],
    ["动物园枢纽站", "二里沟", "百万庄", "甘家口大厦", "甘家口东", "阜外西口", "展览路", "阜成门外", "阜成门", "阜成门内", "白塔寺", "西四路口西", "缸瓦市", "甘石桥", "西单商场", "西单路口南", "宣武门内", "校场口", "菜市口北", "果子巷", "虎坊桥路口南", "太平街北口", "太平街", "陶然桥北", "永定门长途汽车站", "北京南站"]
];

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]);
    }
} //为站点选择框根据线路选择框的值动态添加选项

↑上面代码改变，会自动显示代码结果 jQuery调用版本：1.11.3

立即下载

纯js下拉列表二级联动



代码描述：纯js下拉列表二级联动

纯js制作的下拉列表二级联动，灵活性强，移植方便！

0

最新

发表评论全部评论

暂时没有评论！

登录后才可以评论

30秒后在评论吧!

PROMULGATOR

→_→

相关代码

纯js下拉列表二级联动

最新