Javascript implements Tencent-like game selection_javascript skills-JS Tutorial-php.cn

Home

Web Front-end

JS Tutorial

Javascript implements Tencent-like game selection_javascript skills

May 16, 2016 pm 03:59 PM

javascript Drop-down menu

When we play Tencent games, there will be many choices, such as which area to choose, which character, etc. The following is a simple way to create a Tencent game selection.

&lt;!doctype html&gt;
&lt;html lang="en"&gt;
 &lt;head&gt;
 &lt;meta charset="UTF-8"&gt;
 &lt;meta name="Generator" content="EditPlus&reg;"&gt;
 &lt;meta name="Author" content=""&gt;
 &lt;meta name="Keywords" content=""&gt;
 &lt;meta name="Description" content=""&gt;
 &lt;title&gt;纸牌游戏&lt;/title&gt;
 &lt;style type="text/css"&gt;
 #div{width:450px;height:134px;border:1px solid #fff}
 &lt;/style&gt;
 &lt;/head&gt;
 &lt;body&gt;
 &lt;center&gt;
 &lt;div id="div"&gt;
 &lt;img src="images/banner.jpg" width="450" height="134" border="0" alt=""&gt;
 &lt;/div&gt;
 &lt;div style="width:450px;height:134px;border:1px solid #fff;background:#1C85B4"&gt;
 &lt;p&gt;请选择游戏类别:&lt;select id="lei" onChange="ck()" &gt;
 &lt;option&gt;--游戏分类--&lt;/option&gt;
 &lt;/select&gt;&lt;/p&gt;
  &lt;p&gt;请选择游戏名称:&lt;select id="youxi"&gt;
 &lt;option&gt;--游戏名称--&lt;/option&gt;
 &lt;/select&gt;&lt;/p&gt;
   &lt;p&gt;&lt;input name="" type="image" src="images/login.gif" /&gt;&lt;/p&gt;
 &lt;/div&gt;
 &lt;/body&gt;
 &lt;script type="text/javascript"&gt;
 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);  
  }
 }
&lt;/script&gt;
&lt;/html&gt;

Copy after login

The above is the entire content of this article, I hope you all like it.

Statement of this Website

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn