這篇文章主要介紹了javascript實現仿騰訊游戲選擇,簡單實現的下拉菜單二級聯動效果,十分不錯,有需要的小伙伴可以參考下。
到我們玩騰訊游戲的時候,會有很多選擇,比如選擇什麼區,什麼人物等。下面簡單制作騰訊游戲選擇。
?
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="Generator" content="EditPlus®"> <meta name="Author" content=""> <meta name="Keywords" content=""> <meta name="Description" content=""> <title>紙牌游戲</title> <style type="text/css"> #div{width:450px;height:134px;border:1px solid #fff} </style> </head> <body> <center> <div id="div"> <img src="images/banner.jpg" width="450" height="134" border="0" alt=""> </div> <div style="width:450px;height:134px;border:1px solid #fff;background:#1C85B4"> <p>請選擇游戲類別:<select id="lei" onChange="ck()" > <option>--游戲分類--</option> </select></p> <p>請選擇游戲名稱:<select id="youxi"> <option>--游戲名稱--</option> </select></p> <p><input name="" type="image" src="images/login.gif" /></p> </div> </body> <script type="text/javascript"> var lei= document.getElementById("lei"); var youxi= document.getElementById("youxi"); //創建省市數組 var List=new Array(); List['紙牌游戲'] = ['斗地主','拖拉機','橋牌','拱豬','打百分']; List['棋類游戲'] = ['圍棋','象棋','跳棋','西瓜棋','五子棋']; List['其他游戲'] = ['槍林彈雨','跑跑卡丁車','英雄聯盟','CF','英雄三國']; for(var i in List){ lei.add(new Option(i,i),null); } lei.onchange=function(){ var lei= document.getElementById("lei").value; var youxi= document.getElementById("youxi"); youxi.options.length=0; for(var k in List[lei]){ youxi.add(new Option(List[lei][k],List[lei][k]),null); } } </script> </html>以上所述就是本文的全部內容了,希望大家能夠喜歡。