欢迎来到DIVCSS5查找CSS资料与学习DIV CSS布局技术!

以下为示例代码:

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

<html>

<title>通过选择项显示不同的结果</title>

<head>

<script type="text/JavaScript">

function showdiv()

{

var doc=document;

var citytext=doc.getElementById("city").value;

var div1=doc.getElementById("div1");

var div2=doc.getElementById("div2");

var div3=doc.getElementById("div3");

switch (citytext)

{

case "广州":   

    div1.setAttribute("style","display");

div2.setAttribute("style","display:none");

div3.setAttribute("style","display:none");

doc.getElementById("text1").value=citytext;

    break;

case "南昌":

    div1.setAttribute("style","display:none");

div2.setAttribute("style","display");

div3.setAttribute("style","display:none");

doc.getElementById("text2").value=citytext;

break;

case "沈阳":

    div1.setAttribute("style","display:none");

div2.setAttribute("style","display:none");

div3.setAttribute("style","display");

doc.getElementById("text3").value=citytext;

break;

}

}

</script>

</head>

<body>

<select title="城市" id="city" onchange="showdiv()">

<option selected value="广州">广州</option>

<option value="南昌">南昌</option>

<option value="沈阳">沈阳</option>

</select>

<div  id="div1" style="display:none"  >您选择了广东的省会<input type="text" id="text1" value=""/></div>

<div  id="div2" style="display:none"  >您选择了江西的省会<input type="text" id="text2" value=""/></div>

<div  id="div3" style="display:none"  >您选择了辽宁的省会<input type="text" id="text3" value=""/></div>

</body>

</html>


如需转载,请注明文章出处和来源网址:http://www.divcss5.com/html/h57622.shtml