效果圖如下：
具體實現步驟如下：
1.所用js代碼如下：
<script type="text/javascript"> var arr_province=["請選擇省份/城市","北京市","上海市","天津市","河南省","山東省","河北省"]; var arr_city=[ ["請選擇城市/地區"], ["中關村","海淀區","朝陽區","昌平區","豐台區","大興區"], ["寶坻區","浦東新區","長寧區","徐匯區","虹口區","寶山區"], ["和平區","河東區","河西區","塘沽區","大港區","北辰區"], ["鄭州市","洛陽市","商丘市","開封市","安陽市","濮陽市"], ["濟南市","青島市","煙台市","德州市"], ["石家庄","菏澤市","唐山市"], ]; function init() { var province=document.form1.province; province.style.width=150+"px"; var city=document.form1.city; city.style.width=150+"px"; //給province賦值高度，才能在其里面寫入內容 province.length=arr_province.length; for(var i=0;i<arr_province.length;i++) { province.options[i].text=arr_province[i]; province.options[i].value=arr_province[i]; } //設置默認被選中的選項 var index=0; province.selectedIndex=index; //給city賦值高度，才能在其里面寫入內容 city.length=arr_city[index].length; for(var j=0;j<arr_city[index].length;j++) { city.options[j].text=arr_city[index][j]; city.options[j].value=arr_city[index][j]; } } function select_change(num) { var city=document.form1.city; city.length=0; city.length=arr_city[num].length; for(var i=0; i<arr_city[num].length;i++) { city.options[i].text=arr_city[num][i]; city.options[i].value=arr_city[num][i]; } } </script>
2.body中的代碼如下：
<body onload="init()"> <form name="form1"> 所在地區：<select name="province" onchange="select_change(this.selectedIndex)"></select> 城市：<select name="city"></select> </form> </body>
1.利用javascript來實現鼠標經過圖片放大，鼠標移出圖片恢復的效果，具體代碼如下：
<script type="text/javascript"> function init() { var img0=document.getElementById("img0"); img0.onmouseover=function() { img0.style.width=img0.offsetWidth*1.5+"px" } img0.onmouseout=function() { img0.style.width=img0.offsetWidth/1.5+"px" } } </script>
2.body中的代碼如下：
<body onload="init()"> <img id="img0" src="images/4.jpg" /> </body>