Home Web Front-end JS Tutorial Javascript implements Tencent-like game selection_javascript skills

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.

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>

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

Hot Article Tags

Notepad++7.3.1

Notepad++7.3.1

Easy-to-use and free code editor

SublimeText3 Chinese version

SublimeText3 Chinese version

Chinese version, very easy to use

Zend Studio 13.0.1

Zend Studio 13.0.1

Powerful PHP integrated development environment

Dreamweaver CS6

Dreamweaver CS6

Visual web development tools

SublimeText3 Mac version

SublimeText3 Mac version

God-level code editing software (SublimeText3)

How to make drop-down menu in WPS table How to make drop-down menu in WPS table Mar 21, 2024 pm 01:31 PM

How to make drop-down menu in WPS table

How to implement an online speech recognition system using WebSocket and JavaScript How to implement an online speech recognition system using WebSocket and JavaScript Dec 17, 2023 pm 02:54 PM

How to implement an online speech recognition system using WebSocket and JavaScript

WebSocket and JavaScript: key technologies for implementing real-time monitoring systems WebSocket and JavaScript: key technologies for implementing real-time monitoring systems Dec 17, 2023 pm 05:30 PM

WebSocket and JavaScript: key technologies for implementing real-time monitoring systems

How to implement an online reservation system using WebSocket and JavaScript How to implement an online reservation system using WebSocket and JavaScript Dec 17, 2023 am 09:39 AM

How to implement an online reservation system using WebSocket and JavaScript

How to use JavaScript and WebSocket to implement a real-time online ordering system How to use JavaScript and WebSocket to implement a real-time online ordering system Dec 17, 2023 pm 12:09 PM

How to use JavaScript and WebSocket to implement a real-time online ordering system

JavaScript and WebSocket: Building an efficient real-time weather forecasting system JavaScript and WebSocket: Building an efficient real-time weather forecasting system Dec 17, 2023 pm 05:13 PM

JavaScript and WebSocket: Building an efficient real-time weather forecasting system

Simple JavaScript Tutorial: How to Get HTTP Status Code Simple JavaScript Tutorial: How to Get HTTP Status Code Jan 05, 2024 pm 06:08 PM

Simple JavaScript Tutorial: How to Get HTTP Status Code

How to set up excel drop-down menu to automatically associate data? Excel drop-down menu automatically associates data settings How to set up excel drop-down menu to automatically associate data? Excel drop-down menu automatically associates data settings Mar 13, 2024 pm 03:04 PM

How to set up excel drop-down menu to automatically associate data? Excel drop-down menu automatically associates data settings

See all articles