昨夜小编看了一下腾讯课堂的课程觉得甚好，于是今天决定要将代码敲一遍，废话不多说，让我们一睹为快，切换游戏类别时，游戏名称也将发生对应的改变
<!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>
