首頁 > 開發者 > JavaScript
本文執行個體為大家分享了Javascript實現二級聯動菜單效果的對應代碼，具體內容如下
效果圖如下：
具體實現步驟如下：
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>
以上就是本文的全部內容，希望對大家學習javascript程式設計有所協助。
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
