二级联动与三级联动效果详解-优快云博客

select二级联动效果:

1.数组：

<script>
var arr=new Arrey();
arr[0]="a";
arr[1]=["b1","b2","b3"];
arr[2]="c";

for(var i=0;i<arr.length;i++){
document.write(arr[1]);
}
</script>

2.二级联动：

<script>
function change(){
var cityList= new Array();
	     cityList['山东省'] = ['济南', '青岛', '淄博', '枣庄', '东营', '烟台', '潍坊', '济宁', '泰安', '威海', '日照'];
	 cityList['四川省'] =['成都', '绵阳', '德阳', '自贡', '内江', '乐山', '南充', '雅安', '眉山', '甘孜', '凉山', '泸州'];
     cityList['湖北省'] = ['武汉', '宜昌', '荆州', '襄樊', '黄石', '荆门', '黄冈', '十堰', '恩施', '潜江'];



var pro=document.getElementById("province").value;
var city=document.getElementById("city");
		city.options.length=1;
		for(var i=0;i<cityList[pro].length;i++){
			//document.write(cityList[pro][i]+"<br />");
			var op=new Option(cityList[pro][i],cityList[pro][i]);
			city.options.add(op);
		}
}
</script>

<body>

省：<select id="province" onchange="change()">
		<option>请选择</option>
		<option value="山东省">山东省</option>
		<option value="四川省">四川省</option>
		<option value="湖北省">河北省</option>
		</select>
市：<select id="city">
		<option>请选择</option>
		</select>
</body>

3.三级联动：

<script type="text/javascript">
var cityList= new Array();
cityList['1']=['a','b','c'];
cityList['2']=['d','e','f'];
cityList['3']=['g','h','i'];

cityList['1']['a']=['aa','bb','cc'];
cityList['1']['b']=['dd','ee','ff'];
cityList['1']['c']=['gg','hh','ii'];

cityList['2']['d']=['a1','b2','c3'];
cityList['2']['e']=['a4','b5','c6'];
cityList['2']['f']=['a7','b8','c9'];

cityList['3']['g']=['11','22','33'];
cityList['3']['h']=['44','55','66'];
cityList['3']['i']=['77','88','99'];

function change(){
var pro=document.getElementById("province").value;
var city=document.getElementById("city");
var town=document.getElementById("town");
		city.options.length=1;
		for(var i=0;i<cityList[pro].length;i++){
			//document.write(cityList[pro][i]+"<br />");
			var op=new Option(cityList[pro][i],cityList[pro][i]);
			city.options.add(op);
			}
}

function change2(){

var pro=document.getElementById("province").value;
var city=document.getElementById("city").value;
var town=document.getElementById("town");

town.options.length=1;
		for(var j=0;j<cityList[pro][city].length;j++){
			var op1=new Option(cityList[pro][city][j],cityList[pro][city][j]);
			town.options.add(op1);
		}

}
</script>
</head>
<body>

省：<select id="province" onChange="change()">
		<option>请选择</option>
		<option value="1">1</option>
		<option value="2">2</option>
		<option value="3">3</option>
		</select>
市：<select id="city" onChange="change2()">
		<option>请选择</option>
		</select>
县：<select id="town">
		<option>请选择</option>
		</select>


</body>

播放背景音乐：

<body>

<embed src="p1.jpg" hidden="false" loop="true">

</body>

迅雷首页海报播放效果：
1.用图形化界面绘制div
2.向代码中添加所需代码

<SCRIPT language="JavaScript">
                var NowFrame = 1;
				var MaxFrame = 7;
				function scroll1(d1) {
				   if(Number(d1)){
				    clearTimeout(theTimer);
				    NowFrame=d1;              
			    	}
					else{
					for(var i=1;i<(MaxFrame+1);i++){
					  if(NowFrame==i){
				    	document.getElementById(NowFrame).style.display='block';    
					  }else{
					   document.getElementById(i).style.display='none'; 
					        }
					}
					
			        if(NowFrame == MaxFrame){  
					NowFrame = 1;}
				      else{
					  NowFrame++;
				    	}
					
					 theTimer=setTimeout('scroll1()', 2000); 
					 } 
				}			
</SCRIPT> 

<BODY onLoad="scroll1()">
<DIV align="center">

<IMG src="images/d1.png"  id="1" style="display:none;">
<IMG src="images/d2.png"  id="2" style="display:none;">
<IMG src="images/d3.png"  id="3" style="display:none;">
<IMG src="images/d4.png"  id="4" style="display:none;">
<IMG src="images/d5.png"  id="5" style="display:none;">
<IMG src="images/d6.png"  id="6" style="display:none;">
<IMG src="images/d7.png"  id="7" style="display:none;">


  <DIV style="position:relative;top:-45px;z-index:2;" align="center">
      <img src="images/x1.jpg" id="bg1" onMouseMove="scroll1(1)">
      <img src="images/x2.jpg" id="bg2" onMouseMove="scroll1(2)">
      <img src="images/x3.jpg" id="bg3" onMouseMove="scroll1(3)">
      <img src="images/x4.jpg" id="bg4" onMouseMove="scroll1(4)">
      <img src="images/x5.jpg" id="bg5" onMouseMove="scroll1(5)">
      <img src="images/x6.jpg" id="bg6" onMouseMove="scroll1(6)">
      <img src="images/x7.jpg" id="bg7" onMouseMove="scroll1(7)">
  </DIV>
</DIV>            
</BODY>

HTML基础（三）