正文
网页制作之JavaScript部分3--事件及事件传输方式（函数调用 练习题 ）重要---持续更新中
提示：扫一扫查出行【扫一扫了解最新限行尾号】
复制提示
一、 事件：说白了就是调用函数的一种方式。它包括：事件源、事件数据、事件处理程序。
JS事件
1、js事件通常和函数结合来使用，这样可以通过发生的事件来驱动函数的执行，从而引起html出现不同的效果。
2、属性（当这些事件的属性发生改变时，会触发function{}的函数）：
1）onabort:当图像加载被中断时，会引发function内的函数。
2）onbur:当元素失去焦点；
3）onfocus:当元素获得焦点，获得焦点，就是文本框里面的内容修改
4）onclick:鼠标点击某个对象
5）ondbclick:鼠标双击某个对象
6）onerror:当加载文档或图像时发生某个错误
7）onchange:当用户改变域的内容（onchange事件常结合对输入的字段验证来使用，常用语表单验证身份证、邮箱注册及登录、区号等等的格式是否正确）
8）onkeydown:某个键盘的键被按下
9）onkeypress:某个键盘的键被按下或按住
10）onkeyup:某个键盘的键被松开
11）onload:某个页面或图像被完成加载
12）onmousedown:某个鼠标按键被按下（onmousedown, onmouseup 以及 onclick 构成了鼠标点击事件的所有部分。首先当点击鼠标按钮时，会触发 onmousedown 事件，当释放鼠标按钮时，会触发 onmouseup 事件，最后，当完成鼠标点击时，会触发 onclick 事件。）
13）onmousemove:鼠标被移动
14）onmouseout:鼠标从某元素移开
15）onmouseover:鼠标被移动到某元素之上
16）onmouseup:某个鼠标按钮被松开（区别onkeyup）
17）onreset:重置按钮被点击
18）onresize:窗口或框架被调整尺寸
19）onselect:文本被选定
20）onsubmit:提交按钮被点击
21）onunload:用户退出页面
二、事件传输（注意与c#的参数传递区别）
1、整型参数：直接写在括号里
eg.
<body>
<div class="t1" onclick="a(0)"></div> //a(0)
<div class="t1" onclick="a(1)"></div></body><script type="text/javascript">var t=new Array();
t[0]="url(05.gif)";
t[1]="url(06.gif)";function a(m)
{
n.style.backgroundImage=t[m];
if(m==8)
{
alert("你失败了！");
}
}</script>
2.字符串 参数，双引号嵌套，里面要用单引号（不只是在传参的时候）
eg.
<body>
<div class="t1" onclick="a('abc')"></div>
<body/><script type="text/javascript">function a(n)
{
alert(n);
}</script>输出结果：
abc
3.传自身元素：参数写this，this代表该元素(this是JavaScript中功能最强大的关键字之一。)(形参的传递不止一个)
eg.扫雷游戏
<body>
//方式一利用this调用自身
<div id="d1">
<div class="t1" onclick="a(this,0)"></div>
<div class="t1" onclick="a(this,1)"></div>
<div class="t1" onclick="a(this,2)"></div>
<div class="t1" onclick="a(this,3)"></div>
<div class="t1" onclick="a(this,4)"></div>
<div class="t1" onclick="a(this,5)"></div>
<div class="t1" onclick="a(this,6)"></div>
<div class="t1" onclick="a(this,7)"></div>
<div class="t1" onclick="a(this,8)"></div>
<div class="t1" onclick="a(this,9)"></div>
<div class="t1" onclick="a(this,10)"></div>
<div class="t1" onclick="a(this,11)"></div>
<div class="t1" onclick="a(this,12)"></div>
<div class="t1" onclick="a(this,13)"></div>
<div class="t1" onclick="a(this,14)"></div>
<div class="t1" onclick="a(this,15)"></div>
<div class="t1" onclick="a(this,16)"></div>
<div class="t1" onclick="a(this,17)"></div>
<div class="t1" onclick="a(this,18)"></div>
<div class="t1" onclick="a(this,19)"></div>
</div> </body> <script type="text/javascript"> var t=new Array();//数组
t[0]="url(05.gif)";t[1]="url(06.gif)";t[2]="url(07.gif)";t[3]="url(08.gif)";t[4]="url(09.gif)";
t[5]="url(15.gif)";t[6]="url(16.gif)";t[7]="url(17.gif)";t[8]="url(18.gif)";t[9]="url(19.gif)";
t[10]="url(25.gif)";t[11]="url(26.gif)";t[12]="url(27.gif)";t[13]="url(28.gif)";t[14]="url(29.gif)";
t[15]="url(35.gif)";t[16]="url(36.gif)";t[17]="url(37.gif)";t[18]="url(38.gif)";t[19]="url(39.gif)"; function a(n,m)
{
/*var s=new Array();
s=document.getElementsByClassName("t1");*/
n.style.backgroundImage=t[m];
if(m==8)
{
alert("你失败了！");
}
} </script> 方式二 利用document.getElementsByClassName（）返回数组特性
利用class数组
<div id="d1">
<div class="t1" onclick="a(0)"></div>
<div class="t1" onclick="a(1)"></div>
<div class="t1" onclick="a(2)"></div>
<div class="t1" onclick="a(3)"></div>
<div class="t1" onclick="a(4)"></div>
<div class="t1" onclick="a(5)"></div>
<div class="t1" onclick="a(6)"></div>
<div class="t1" onclick="a(7)"></div>
<div class="t1" onclick="a(8)"></div>
<div class="t1" onclick="a(9)"></div>
<div class="t1" onclick="a(10)"></div>
<div class="t1" onclick="a(11)"></div>
<div class="t1" onclick="a(12)"></div>
<div class="t1" onclick="a(13)"></div>
<div class="t1" onclick="a(14)"></div>
<div class="t1" onclick="a(15)"></div>
<div class="t1" onclick="a(16)"></div>
<div class="t1" onclick="a(17)"></div>
<div class="t1" onclick="a(18)"></div>
<div class="t1" onclick="a(19)"></div>
</div> </body> <script type="text/javascript"> var t=new Array();//数组
t[0]="url(05.gif)";t[1]="url(06.gif)";t[2]="url(07.gif)";t[3]="url(08.gif)";t[4]="url(09.gif)";
t[5]="url(15.gif)";t[6]="url(16.gif)";t[7]="url(17.gif)";t[8]="url(18.gif)";t[9]="url(19.gif)";
t[10]="url(25.gif)";t[11]="url(26.gif)";t[12]="url(27.gif)";t[13]="url(28.gif)";t[14]="url(29.gif)";
t[15]="url(35.gif)";t[16]="url(36.gif)";t[17]="url(37.gif)";t[18]="url(38.gif)";t[19]="url(39.gif)"; function a(m)
{
var s=new Array();
s=document.getElementsByClassName("t1");
s[m].style.backgroundImage=t[m];
if(m==8)
{
alert("你失败了！");
}
} </script>
三、练习题部分
eg1.图片轮播
（注意
window.setInterval("a()",1000);与window.setTimeout("a()",1000);应用时，一定要注意放的位置。先执行延时再执行代码（如果放在这两句后面的代码就不会执行了）
）
<div id="d" style="background-image:url(328477.jpg)"></div><input type="button" value="按钮" onclick="b()"/>
<input type="button" value="暂停" onclick="c()"/>
</body>
<script type="text/javascript">var t= new Array();
t[0]="url(328477.jpg)";
t[1]="url(330527.jpg)";
t[2]="url(343107.jpg)";
var n=0;function a()
{
if(n==2)
{
n=0;
}
else
{
n++;
}
document.getElementById("d").style.backgroundImage=t[n];//用
/*window.setTimeout("a()",1000);*/
}/*window.setTimeout("a()",1000);*/
var r= new Array();
function b()
{
r[0]=window.setInterval("a()",1000);//用数组存储，因为不清楚window.setInterval("a()",1000)类型
}function c()
{
window.clearInterval(r[0]);
}
</script>
eg2、广告弹窗
方法一：比较简便
<body>
<img src="1-2.jpg"/>
<img src="1-2.jpg"/>
<img src="1-2.jpg"/>
<div id="gg" style="display:none"></div>
</body>
<script type="text/javascript">
function showg()
{
document.getElementById("gg").style.display="block";
window.setTimeout("hideg()",5000);
}
function hideg()
{
document.getElementById("gg").style.display="none";
}
window.setTimeout("showg()",5000);</script>
方式二 （自己做的）
<div id="d1"></div>
<div id="d2" style="display:none"></div></body>
<script type="text/javascript">
var n=9;
function a()
{
n--;
if(n>=0)
{
window.setTimeout("a()",1000);
if(n==5)
{
document.getElementById("d2").style.display="block";
}
if(n==0)
{
document.getElementById("d2").style.display="none";
}
}}
window.setTimeout("a()",1000);
</script>
eg3.关灯效果
<style type="text/css">
#gd
{
width:100%;
height:100%;
background-color:#333;
filter:alpha(opacity=50);-moz-opacity:0.5;opacity: 0.5;
position:fixed;
top:0px;
left:0px;
z-index:1;
}
</style>
</head> <body>
<div style="z-index:2; height:30px; position:absolute;"><input type="button" value="开关灯" onclick="deng()" /></div>
<img src="1-2.jpg"/>
<img src="1-2.jpg"/>
<img src="1-2.jpg"/>
<div id="gd" style="display:none"></div>
</body>
<script type="text/javascript">
function deng()
{
//alert("ss");
var s = document.getElementById("gd").style.display;
if(s=="block")
{
document.getElementById("gd").style.display="none";
}
else
{
document.getElementById("gd").style.display="block";
}
}
</script>
eg4、光棒效果
<body>
<table width="600" border="1" cellpadding="0" cellspacing="0">
<tr onmouseover="showcolor(this)" onmouseout="huifu(this)" style="background-color:#3F0">
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr onmouseover="showcolor(this)" onmouseout="huifu(this)" style="background-color:#3F0">
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr onmouseover="showcolor(this)" onmouseout="huifu(this)" style="background-color:#3F0">
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr onmouseover="showcolor(this)" onmouseout="huifu(this)" style="background-color:#3F0">
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr onmouseover="showcolor(this)" onmouseout="huifu(this)" style="background-color:#3F0">
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
</table><select>
<option>11</option>
<option>11</option>
<option>11</option>
</select>
</body>
<script type="text/javascript">
function showcolor(a)
{
a.style.backgroundColor="white";
}
function huifu(b)
{
b.style.backgroundColor="#3F0";
}
</script>
事件冒泡：
当元素嵌套的时候，内部元素激发某个事件后，默认情况下外部元素相应的也会触发。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">
</HEAD> <BODY>
<div onclick="test()">
<div onclick="test()">
<div onclick="test()">阻止事件冒泡</div>
</div>
</div>
</BODY>
</HTML>
<SCRIPT LANGUAGE="JavaScript">
<!--
//阻止事件冒泡
function stopEventBubble(event){
var e=event || window.event; if (e && e.stopPropagation){
e.stopPropagation();
}
else{
e.cancelBubble=true;
}
} //测试方法，调用时，直接调用test()或者test(event)，前者默认在调用最后一个未对应的参数传递事件
function test(evt){
alert('hahaha');
stopEventBubble(evt);
}
//-->
</SCRIPT>
eg.5做一个漂亮的下拉菜单选择框
<style type="text/css">
*{margin:0px auto;
padding:0px;}
.m
{
width:200px;
height:30px;
background-color:#;
color:white;
font-weight:bold;
text-align:center;
line-height:30px;
vertical-align:middle;
}
#txt
{
font-size:14px;
text-align:center;
}
</style>
</head> <body>
<div style="width:100%; height:600px;" onclick="hidemenu()">
<div style="width:200px">
<input id="txt" type="text" value="" style="width:196px; height:28px;" onclick="showmenu()" />
<div id="menu" style="display:none">
<div class="m" onmouseover="change(this)" onclick="selectme(this)">家电</div>
<div class="m" onmouseover="change(this)" onclick="selectme(this)">服装</div>
<div class="m" onmouseover="change(this)" onclick="selectme(this)">数码</div>
<div class="m" onmouseover="change(this)" onclick="selectme(this)">食品</div>
<div class="m" onmouseover="change(this)" onclick="selectme(this)">玩具</div>
</div>
</div>
</div>
</body>
<script type="text/javascript"> //第1步、如何显示下拉列表
function showmenu()
{
var d = document.getElementById("menu");
d.style.display="block";
stopEventBubble(event);//由于受外层div嵌套影响，加上阻止事件冒泡
} //第2步、如何隐藏下拉列表
function hidemenu()
{
var d = document.getElementById("menu");
d.style.display="none";
} //第3步、下拉菜单的变色效果
function change(a)
{
huifu();//让他恢复默认的颜色效果，目的只让this本身变色
a.style.backgroundColor="#60F";
}
//恢复默认 下拉菜单的原本 背景颜色
function huifu()
{
var s = document.getElementsByClassName("m");
for(var i=; i<s.length;i++)
{
s[i].style.backgroundColor="#339";
}
} //第4步、点击下拉列表，改变输入框中的value
function selectme(a)
{
document.getElementById("txt").value=a.innerText;
} //阻止事件冒泡函数
function stopEventBubble(event){
var e=event || window.event; if (e && e.stopPropagation){
e.stopPropagation();
}
else{
e.cancelBubble=true;
}
}
</script>
</html>
eg6、”踩雷游戏“
<style type="text/css">
.d
{
width:200px;
height:200px;
float:left;
background-color:#;
border:1px solid white;
}
</style>
</head> <body>
<div id="wai"> </div>
</body>
<script type="text/javascript">
var img = new Array();
img[]="url(../../WorkTools/%E5%9B%BE%E6%A0%87/20150125090904182_easyicon_net_256.png)";
img[]="url(../../WorkTools/%E5%9B%BE%E6%A0%87/20150125090904182_easyicon_net_256.png)";
img[]="url(../../WorkTools/%E5%9B%BE%E6%A0%87/20150125090904182_easyicon_net_256.png)";
img[]="url(../../WorkTools/%E5%9B%BE%E6%A0%87/20150125090904182_easyicon_net_256.png)";
img[]="url(../../WorkTools/%E5%9B%BE%E6%A0%87/20150125090904182_easyicon_net_256.png)";
img[]="url(../../WorkTools/%E5%9B%BE%E6%A0%87/20150125090904182_easyicon_net_256.png)";
img[]="url(../../WorkTools/%E5%9B%BE%E6%A0%87/20150125090904182_easyicon_net_256.png)";
img[]="url(../../WorkTools/%E5%9B%BE%E6%A0%87/20150125090904182_easyicon_net_256.png)";
img[]="url(../../WorkTools/%E5%9B%BE%E6%A0%87/20150125090904182_easyicon_net_256.png)";
jiazai(); //利用函数进行div的布局，简单
function jiazai()
{
var s = "";
for(var i=;i<;i++)
{
if(i== || i==)
{
s=s+" <div class='d' onclick='showimg(this,"+i+")'></div><div style='clear:both'></div>";
}
else
{
s = s+" <div class='d' onclick='showimg(this,"+i+")'></div>";
}
} var d = document.getElementById("wai");
d.innerHTML=s;
} function showimg(a,b)
{
a.style.backgroundImage=img[b];
if(b==)
{
alert("踩到雷了！");
window.close();
}
}
方式二、利用透明度效果（将大DIV设背景图片，小DIV设背景颜色并设置触发的事件（当点击小DIV时它的背景颜色变为透明））
1 <head>
2 <title>无标题文档</title>
3 <style type="text/css">
4 *
5 {
6 margin:0px auto;
7 padding:0px;
8 }
9 #a1 div
10 {
11 width:100px;
12 height:100px;
13 background-color:#09F;
14 border:1px solid black;
15 float:left;
16 }
17 #a1
18 {
19 width:410px;
20 height:410px;
21 background-image:url(../../../Pictures/1437459768106.jpg);
22 }
23 </style>
24 </head>
25
26 <body>
27 <div id="a1">
28 <div id="aa1" onclick="pic(this)"></div>
29 <div id="aa2" onclick="pic(this)"></div>
30 <div id="aa3" onclick="pic(this)"></div>
31 <div id="aa4" onclick="pic(this)"></div>
32 <div id="bb1" onclick="pic(this)"></div>
33 <div id="bb2" onclick="pic(this)"></div>
34 <div id="bb3" onclick="pic(this)"></div>
35 <div id="bb4" onclick="pic(this)"></div>
36 <div id="cc1" onclick="pic(this)"></div>
37 <div id="cc2" onclick="pic(this)"></div>
38 <div id="cc3" onclick="pic(this)"></div>
39 <div id="cc4" onclick="pic(this)"></div>
40 <div id="dd1" onclick="pic(this)"></div>
41 <div id="dd2" onclick="pic(this)"></div>
42 <div id="dd3" onclick="pic(this)"></div>
43 <div id="dd4" onclick="pic(this)"></div>
44 </div>
45 </body>
46 <script type="text/javascript">
47 function pic(a)
48 {
49 a.style.opacity="0";
50 }
51 </script>
eg7、文字的渐入效果（逐渐出现）
<style type="text/css">
#shi
{
font-family:"Times New Roman", Times, serif;
font-size:40px;
font-weight:bold;
color:#60F;
height:50px;
width:500px;
}
</style>
</head> <body>
<div id="wai" style="width:0px; height:50px; overflow:hidden;">
<div id="shi">床前明月光</div>
</div>
</body>
<script type="text/javascript">
showshi();
function showshi()
{
var d = document.getElementById("wai");
if(parseInt(d.style.width)<500)
{
var w = parseInt(d.style.width)+1;
d.style.width= w+"px";
window.setTimeout("showshi()",20);
} }
</script>
eg8.背景的左右渐进效果
老师版
<body>
<input id="img1" type="image" value="开始" src="../../WorkTools/素材/图标/12Nc4391L0-33393.png" style=" width:40px; height:40px;position:absolute; left:190px; top:300px; margin-left:0px; display:block" onclick="rightmove()" />
<input id="img2" type="image" src="../../WorkTools/素材/图标/12Nc4391030-1VL.png" style=" width:40px; height:40px;position:absolute; right:200px; top:300px; margin-right:0px; display:none" onclick="leftmove()" /><div style="width:100%; height:600px; overflow:hidden">
<div style="width:1600px; height:600px;">
<div id="d1" style="width:800px; height:600px; background-color:#309; float:left; margin-left:-600px;">
</div>
<div id="d2" style="width:800px; height:600px; background-color:#F03; float:left">
</div>
</div>
</div>
</body>
<script type="text/javascript">
function rightmove()
{
var dd = document.getElementById("d1");
var bb = document.getElementById("img1");
if(parseInt(dd.style.marginLeft)<0)
{
var bm = parseInt(bb.style.marginLeft)+1;
var m = parseInt(dd.style.marginLeft)+1;
dd.style.marginLeft=m+"px";
bb.style.marginLeft=bm+"px";
var t = window.setTimeout("rightmove()",2)；//注意延时必须放于此住，？自己想！
}
else
{
window.clearTimeout(t);
document.getElementById("img1").style.display="none";
document.getElementById("img1").style.marginLeft=0+"px";
document.getElementById("img2").style.display="block";
}}
function leftmove()
{
var d = document.getElementById("d1");
var b = document.getElementById("img2");
if(parseInt(d.style.marginLeft)>(-600))
{
var bm = parseInt(b.style.marginRight)+1;
var m = parseInt(d.style.marginLeft)-1;
d.style.marginLeft= m+"px";
b.style.marginRight= bm+"px";
var t1 = window.setTimeout("leftmove()",2);
}
else
{
window.clearTimeout(t1);
document.getElementById("img1").style.display="block";;
document.getElementById("img2").style.display="none";
document.getElementById("img2").style.marginRight=0+"px";
}}
</script>
自己做的
<body>
<input id="btn" type="image" value="开始" src="POINT04.ICO" style=" width:40px; height:40px;position:absolute; left:490px; top:300px; display:block" onclick="a()"/>
<input id="btn1" type="image" value="开始" src="POINT02.ICO" style=" width:40px; height:40px;position:absolute; right:440px; top:300px; display:none" onclick="b()"/>
<div style="width:100%; height:600px; overflow:hidden">
<div style="width:1800px; height:600px; overflow:hidden">
<div id="d1" style="width:900px; height:600px; background-color:#309; float:left; margin-left:-400px;"></div>
<div id="d2" style="width:900px; height:600px; background-color:#F03; float:left; margin-right:0px;"></div>
</div>
</div>
</body><script type="text/javascript">var p=document.getElementById("btn1");
var j=document.getElementById("btn");
function a()
{
var m=document.getElementById("d1");
if(parseInt(m.style.marginLeft)<0)
{
var n=parseInt(m.style.marginLeft)+1;
m.style.marginLeft=n+"px"; var k=parseInt(j.style.left)+1;
j.style.left=k+"px"; /*if(parseInt(p.style.right)>=440)
{
var q=parseInt(p.style.right)-1;
p.style.right=q+"px";
}*/ window.setTimeout("a()",1);
}
else <!--if(parseInt(m.style.marginLeft)==0)-->
{
p.style.right="440px";
j.style.display="none";
p.style.display="block";
}
}function b()
{
var m=document.getElementById("d1");
var p=document.getElementById("btn1");
if(parseInt(m.style.marginLeft)>-400)
{
var n=parseInt(m.style.marginLeft)-1;
m.style.marginLeft=n+"px"; var q=parseInt(p.style.right)+1;
p.style.right=q+"px"; /*var h=parseInt(j.style.left)-1;
j.style.left=h+"px";*/ window.setTimeout("b()",1);
}
else
{
j.style.left="490px";
j.style.display="block";
p.style.display="none";
}
//window.setTimeout("b()",1);
}</script>
eg10、省市级三级联动
<body> <!--<select id="pro" onchange="a()">
<option selected="selected">省份</option>
<option class="pro">河北省</option>
<option class="pro">山东省</option>
</select>
<select id="city" onchange="b()">
<option id="city1" selected="selected">地级市</option>
<option class="hb" style="display:none">石家庄市</option>
<option class="hb" style="display:none">唐山市</option>
<option class="sd" style="display:none">淄博市</option>
<option class="sd" style="display:none">泰安市</option>
</select>
<select id="qu">
<option id="qu1" selected="selected">市、区、县</option> <option class="sjz" style="display:none">长安区</option>
<option class="sjz" style="display:none">桥西区</option>
<option class="sjz" style="display:none">新华区</option>
<option class="sjz" style="display:none">桥东区</option> <option class="zb" style="display:none">张店区</option>
<option class="zb" style="display:none">淄川区</option>
<option class="zb" style="display:none">临淄区</option>
<option class="zb" style="display:none">博山区</option>
<option class="zb" style="display:none">周村区</option>
<option class="zb" style="display:none">高新区</option>
<option class="zb" style="display:none">高青县</option>
<option class="zb" style="display:none">桓台县</option>
<option class="zb" style="display:none">沂源县</option> <option class="ta" style="display:none">泰山区</option>
<option class="ta" style="display:none">岱岳区</option>
<option class="ta" style="display:none">新泰市</option>
<option class="ta" style="display:none">肥城市</option>
<option class="ta" style="display:none">宁阳县</option>
<option class="ta" style="display:none">东平县</option>
</select>--> <select id="pro" onchange="pro()">
<option selected="selected">省份</option>
<option value="hb">河北省</option>
<option value="sd">山东省</option>
</select>
<select id="city" onchange="city()">
<option id="city1" selected="selected">地级市</option>
</select>
<select id="qu">
<option id="qu1" selected="selected">市、区、县</option>
</select> </body> <script type="text/javascript"> //改变省份，关联 地级市
function pro()
{
qu_huifu();
var a=document.getElementById("pro");
var b=document.getElementById("city");
var city1="";
if(a.value=="hb")
{
//alert(1);
city1="<option value='sjz'>石家庄市</option> <option value='ts'>唐山市</option>";
}
else if(a.value=="sd")
{
//alert(1);
city1="<option value='zb'>淄博市</option><option value='ta'>泰安市</option>";
}
b.innerHTML=city1;
} //改变地级市，关联 市区县
function city()
{
var c=document.getElementById("city");
var d=document.getElementById("qu");
var qu="";
if(c.value=="sjz")
{
qu="<option value='caq'>长安区</option><option value='qxq'>桥西区</option><option value='xhq'>新华区</option><option value='qdq'>桥东区</option>";
}
else if(c.value=="zb")
{e
qu="<option value='zdq'>张店区</option><option value='zcq'>淄川区</option><option value='lzq'>临淄区</option><option value='bsq'>博山区</option><option value='zcq'>周村区</option><option value='gxq'>高新区</option><option value='gqx'>高青县</option><option value='htx'>桓台县</option>option value='yyx'>沂源县</option>";
}
else if(c.value=="ta")
{
qu="<option value='taq'>泰山区</option><option value='dyq'>岱岳区</option><option value='xts'>新泰市</option><option value='fcs'>肥城市</option><option value='nyx'>宁阳县</option><option value='dpx'>东平县</option>";
}
else
{
qu="<option id='qu1' selected='selected'>市、区、县</option>";
}
d.innerHTML=qu;
} function qu_huifu()
{
document.getElementById("qu").innerHTML="<option value='moren' selected='selected'>市、区、县</option>";
} </script> <!--
<script type="text/javascript"> function a()
{
//huifu_city();
//huifu_qu();
//每当省份发生变化时，区县市选项应该恢复默认值。
document.getElementById("qu1").selected=true; var pro=document.getElementsByClassName("pro");
if(pro[0].selected)
{
var city=document.getElementsByClassName("hb");
city[0].selected=true;
for(var i=0;i<qu.length;i++)
{
city[i].style.display="block";
}
}
else if(pro[1].selected)
{
var city=document.getElementsByClassName("sd");
city[0].selected=true;
for(var i=0;i<qu.length;i++)
{
city[i].style.display="block";
}
}
} function b()
{
huifu_qu();
var city=document.getElementsByClassName("sd");
if(city[0].selected)
{
//huifu_qu();
var qu=document.getElementsByClassName("zb");
qu[0].selected=true;
for(var i=0;i<qu.length;i++)
{
qu[i].style.display="block";
}
} if(city[1].selected)
{
//huifu_qu();
var qu=document.getElementsByClassName("ta");
qu[0].selected=true;
for(var i=0;i<qu.length;i++)
{
qu[i].style.display="block";
}
}
var city3=document.getElementsByClassName("hb");
if(city3[0].selected)
{
var qu=document.getElementsByClassName("sjz");
qu[0].selected=true;
for(var i=0;i<qu.length;i++)
{
qu[i].style.display="block";
}
}
} //区县市恢复默认不显示
function huifu_qu()
{
//document.getElementsById("qu1").selected=true;
var qu1=document.getElementsByClassName("zb");
for(var i=0;i<qu1.length;i++)
{
qu1[i].style.display="none";
}
var qu2=document.getElementsByClassName("ta");
for(var i=0;i<qu2.length;i++)
{
qu2[i].style.display="none";
}
var qu3=document.getElementsByClassName("sjz");
for(var i=0;i<qu3.length;i++)
{
qu3[i].style.display="none";
} }
//城市 恢复默认不显示
function huifu_city()
{
//document.getElementsById("city1").selected=true;
var city1=document.getElementsByClassName("hb");
for(var i=0;i<city1.length;i++)
{
city1[i].style.display="none";
} var city2=document.getElementsByClassName("sd");
for(var i=0;i<city2.length;i++)
{
city2[i].style.display="none";
} } //if(document.getElementById("city").op) //(document.getElementsByClassName("zb").length); </script>--> 方式二 注意在添加<option>标签时，也可用下面的方法：
var p1 = document.createElement("option");
p1.innerHTML="山东";
var p2 = document.createElement("option");
p2.innerHTML="河北"; var s = document.getElementById("select"); s.appendChild(p1);
s.appendChild(p2);
