Home > Developer > JavaScript
Implement level-2 linkage menu Effect Based on Javascript and javascript linkage menu
The example in this article shares with you the code for implementing the level-2 linkage menu effect in Javascript. The specific content is as follows:
As follows:
The specific implementation steps are as follows:
1. The js Code used is as follows:
<Script type = "text/javascript"> var arr_province = ["select province/City", "Beijing", "Shanghai", "Tianjin", "Henan ", "Shandong Province", "Hebei Province"]; var arr_city = [["select city/region"], ["Zhongguancun", "Haidian District", "Chaoyang District", "Changping District ", "Fengtai District", "Daxing District"], ["baodi district", "Pudong New Area", "Changning district", "Xuhui District", "Hongkou district", "Baoshan District"], ["Heping District", "Hedong district", "Hexi District", "Tanggu District", "Dagang district", "Beichen District"], ["Zhengzhou City", "Luoyang City", "Shangqiu City ", "Kaifeng City", "Anyang city", "Puyang City"], ["Jinan City", "Qingdao City", "Yantai City", "Dezhou City"], ["Shijiazhuang", "Heze city ", "Tangshan City"],]; function init () {var province = document. form1.province; province. style. width = 150 + "px"; var city = document. form1.city; city. style. width = 150 + "px"; // assign a height value to province to write content to it. 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];} // sets the default selected option var index = 0; province. selectedIndex = index; // assign height to the city to write the city content. 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. The code in the body is as follows:
<Body onload = "init ()"> <form name = "form1"> region: <select name = "province" onchange = "select_change (this. selectedIndex) "> </select> city: <select name =" city "> </select> </form> </body>
Second effect:
1. Use javascript to zoom in the image and remove the image. The Code is as follows:
<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. The code in the body is as follows:
<body onload="init()"></body>
The above is all the content of this article, and I hope it will help you learn javascript programming.
Articles you may be interested in: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
