下拉框切换一个下拉框另一个下拉框做相应的改变

最新推荐文章于 2024-06-16 01:11:10 发布

太阳的后裔

最新推荐文章于 2024-06-16 01:11:10 发布

阅读量1.5k

点赞数 4

分类专栏： js HTML

本文链接：https://blog.csdn.net/weixin_43942765/article/details/103041894

版权

js 同时被 2 个专栏收录

60 篇文章 3 订阅

订阅专栏

HTML

16 篇文章 1 订阅

订阅专栏

昨夜小编看了一下腾讯课堂的课程觉得甚好，于是今天决定要将代码敲一遍，废话不多说，让我们一睹为快，切换游戏类别时，游戏名称也将发生对应的改变
在这里插入图片描述

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>下拉框</title>
		<style>
		/*.game_out的样式可以让div总是在一个页面上居中*/
			.game_out{
				position: fixed;
				left:50%;
				top:50%;
				transform:translate(-50%,-50%) ;
			}
			.gametype{
				width:100px;
			}
			.gamelist{
				width:100px;
			}
		</style>
	</head>
	<body>
		<div class='game_out'>
			游戏类别：
			<select class='gametype' id='gametype' onchange="changegame()">
				<option>--游戏类别--</option>
			</select><br/>
			游戏名称：
			<select class='gamelist' id='gamelist'>
				<option>--游戏名称--</option>
			</select>
		</div>
		<script type="text/javascript">
			var game=new Array();
			game['纸牌游戏']=['斗地主','炸金花','拖拉机','三打哈'];
			game['棋类游戏']=['五子棋','军旗','中国象棋','围棋'];
			game['其他游戏']=['LOL','魔兽世界','阴阳师','王者荣耀'];
			function changegame()
			{
				var gametype=document.getElementById('gametype').value;
				var gamelist=document.getElementById('gamelist');
				gamelist.options.length=0;//作用是在切换类别时，清除原先对应的游戏名称
				for(var i in game)
				{
					if(i==gametype){
						for(var j in game[i]){
							gamelist.add(new Option(game[i][j]),null);
						}
					}
				}
			}
			function allGame()
			{
				var gametype=document.getElementById('gametype');
				for(var i in game){
					gametype.add(new Option(i,i),null);
				}
			}
			window.onload=allGame();
		</script>
	</body>
</html>