简单的javascript脚本以腾讯游戏为例子

最新推荐文章于 2024-04-03 07:21:58 发布

Fanzongshen

最新推荐文章于 2024-04-03 07:21:58 发布

阅读量1.2k

点赞数

分类专栏： html 文章标签： javascript

本文链接：https://blog.csdn.net/Fanzongshen/article/details/117771531

版权

html 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

添加3个选择按钮选项

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<h1>腾讯游戏</h1>
		<select id="gameName"  >
		</select>
		<select id="detailMessage">
		</select>
	</body>
		<script>
			var dataArr;
			window.onload=function(){
				dataArr=initGame();
				loadGame();
			}
			
			function initGame(){
				var games=[];
				games["DNF"]=[
					{id:1,name:'狂战士'},
					{id:2,name:'剑神'},
					{id:3,name:'阿修罗'},
					{id:3,name:'鬼泣'}
				];
				games["LOL"]=[
					{id:1000,name:'影流之主'},
					{id:1001,name:'疾风亚索'},
					{id:1003,name:'放逐之刃'},
					{id:1004,name:'刀锋之影'},
					{id:1005,name:'提莫'}
				];
				games["QQ飞车"]=[
					{id:100,name:'兰博基尼'},
					{id:101,name:'奥迪A6L'},
					{id:103,name:'奔驰C300'},
					{id:104,name:'玛莎拉蒂'},
					{id:105,name:'宝马X10'}
				];
				 return games;
			}
			function loadGame(){
				var gameSelect= document.getElementById("gameName");
				//注册一个值改变事件
				gameSelect.onchange=cityChange;
				for(let key in dataArr){
					let str=`<option value="${key}">${key}</option>`;
					gameSelect.innerHTML+=str;
				}
				var game = gameSelect.value;
				loadDistrict(game);
			}
			function cityChange(){
				var game =this.value;
				loadDistrict(game);
			}
			function loadDistrict(game){
				var arr=dataArr[game];
				var gameSelect= document.getElementById("detailMessage");
				gameSelect.innerHTML="";
				for (var i = 0; i < arr.length; i++) {
					let obj = arr[i];
					let str =`<option value="${obj.id}">${obj.name}</option>`;
					gameSelect.innerHTML+=str;
				};
			}
		</script>

</html>

Fanzongshen

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
3
评论
简单的javascript脚本以腾讯游戏为例子

添加3个选择按钮选项<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> </head> <body> <h1>腾讯游戏</h1> <select id="gameName" > </select> <select id="detailMess
复制链接

扫一扫