前端下拉框select二级联动显示

html部分
一级下拉框：

<select id="gametype" onchange="changegame()">
	<option value="">--游戏类型--</option>
</select>
<br>
二级下拉框：
<select id="gamelist">
	<option value="">--游戏名称--</option>
</select>

	js部分
	var game = new Array();
	game["纸牌游戏"] = ["斗地主", "炸金花", "蜘蛛纸牌"];
	game["棋类游戏"] = ["军旗", "象棋", "围棋"];
	game["网络游戏"] = ["英雄联盟", "穿越火线", "QQ飞车"];
	function gametypename() {
		var gametypes = document.getElementById("gametype");
		// var gametypes = $("#gametype");
		for (var i in game) {
			gametypes.add(new Option(i, i), null);
		}
	}
	function changegame() {
		
		var gtname = document.getElementById("gametype").value;
		// alert(gtname);
		var gamelists = document.getElementById("gamelist");
		gamelists.options.length=0;
		for (var i in game) {
			if (i == gtname) {
				for (var j in game[i]) {
					gamelists.add(new Option(game[i][j], game[i][j]), null)
				}
			}
		}
	}
	window.onload = gametypename();

• 总结一下，就是用onchange事件触发函数changegame（）来实现二级联动，绑定的是二维数组数据，方法都是一样的获取对象add添加 new option(i,i)对象，这两个值是text和value的值，null表示向后追加。

分享链接https://blog.csdn.net/qq_40410916/article/details/104886628

来源：CSDN

作者：qq_40410916

链接：https://blog.csdn.net/qq_40410916/article/details/104886628