基于Javascript實(shí)現(xiàn)二級(jí)聯(lián)動(dòng)菜單效果
本文實(shí)例為大家分享了Javascript實(shí)現(xiàn)二級(jí)聯(lián)動(dòng)菜單效果的對(duì)應(yīng)代碼,具體內(nèi)容如下
效果圖如下:
具體實(shí)現(xiàn)步驟如下:
1.所用js代碼如下:
<script type="text/javascript"> var arr_province=["請(qǐng)選擇省份/城市","北京市","上海市","天津市","河南省","山東省","河北省"]; var arr_city=[ ["請(qǐng)選擇城市/地區(qū)"], ["中關(guān)村","海淀區(qū)","朝陽(yáng)區(qū)","昌平區(qū)","豐臺(tái)區(qū)","大興區(qū)"], ["寶坻區(qū)","浦東新區(qū)","長(zhǎng)寧區(qū)","徐匯區(qū)","虹口區(qū)","寶山區(qū)"], ["和平區(qū)","河?xùn)|區(qū)","河西區(qū)","塘沽區(qū)","大港區(qū)","北辰區(qū)"], ["鄭州市","洛陽(yáng)市","商丘市","開(kāi)封市","安陽(yáng)市","濮陽(yáng)市"], ["濟(jì)南市","青島市","煙臺(tái)市","德州市"], ["石家莊","菏澤市","唐山市"], ]; function init() { var province=document.form1.province; province.style.width=150+"px"; var city=document.form1.city; city.style.width=150+"px"; //給province賦值高度,才能在其里面寫(xiě)入內(nèi)容 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]; } //設(shè)置默認(rèn)被選中的選項(xiàng) var index=0; province.selectedIndex=index; //給city賦值高度,才能在其里面寫(xiě)入內(nèi)容 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"> 所在地區(qū):<select name="province" onchange="select_change(this.selectedIndex)"></select> 城市:<select name="city"></select> </form> </body>
第二個(gè)效果:
1.利用javascript來(lái)實(shí)現(xiàn)鼠標(biāo)經(jīng)過(guò)圖片放大,鼠標(biāo)移出圖片恢復(fù)的效果,具體代碼如下:
<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>
以上就是本文的全部?jī)?nèi)容,希望對(duì)大家學(xué)習(xí)javascript程序設(shè)計(jì)有所幫助。
- JS實(shí)多級(jí)聯(lián)動(dòng)下拉菜單類,簡(jiǎn)單實(shí)現(xiàn)省市區(qū)聯(lián)動(dòng)菜單!
- jsp從數(shù)據(jù)庫(kù)獲取數(shù)據(jù)填充下拉框?qū)崿F(xiàn)二級(jí)聯(lián)動(dòng)菜單的方法
- js實(shí)現(xiàn)簡(jiǎn)單的聯(lián)動(dòng)菜單效果
- JS簡(jiǎn)單實(shí)現(xiàn)多級(jí)Select聯(lián)動(dòng)菜單效果代碼
- 實(shí)例詳解AngularJS實(shí)現(xiàn)無(wú)限級(jí)聯(lián)動(dòng)菜單
- 從QQ網(wǎng)站中提取的純JS省市區(qū)三級(jí)聯(lián)動(dòng)菜單
- JS實(shí)現(xiàn)的五級(jí)聯(lián)動(dòng)菜單效果完整實(shí)例
- JavaScript實(shí)現(xiàn)三級(jí)聯(lián)動(dòng)菜單效果
- PHP+JS三級(jí)菜單聯(lián)動(dòng)菜單實(shí)現(xiàn)方法
- JavaScript實(shí)現(xiàn)聯(lián)動(dòng)菜單特效
相關(guān)文章
JavaScript基礎(chǔ)之流程控制語(yǔ)句的用法
下面就為大家?guī)?lái)一篇JavaScript基礎(chǔ)之流程控制語(yǔ)句的用法。小編覺(jué)得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-08-08小程序api實(shí)現(xiàn)promise封裝過(guò)程解析
這篇文章主要介紹了小程序api實(shí)現(xiàn)promise封裝過(guò)程解析,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2019-11-11bootstrap與pagehelper實(shí)現(xiàn)分頁(yè)效果
這篇文章主要為大家詳細(xì)介紹了bootstrap與pagehelper實(shí)現(xiàn)分頁(yè)效果,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2018-12-12防止頁(yè)面url緩存中ajax中post請(qǐng)求的處理方法
這篇文章主要介紹了防止頁(yè)面url緩存中ajax中post請(qǐng)求的處理方式的相關(guān)資料,希望通過(guò)本文能幫助到大家,需要的朋友可以參考下2017-10-10BootStrap 圖片樣式、輔助類樣式和CSS組件的實(shí)例詳解
這篇文章主要介紹了BootStrap 圖片樣式、輔助類樣式和CSS組件的實(shí)現(xiàn)代碼,圖文并茂介紹的非常詳細(xì),需要的朋友參考下吧2017-01-01js利用事件的阻止冒泡實(shí)現(xiàn)點(diǎn)擊空白模態(tài)框的隱藏
點(diǎn)擊彈出某個(gè)框框,但是,有時(shí)候不想操作,就想點(diǎn)擊某個(gè)空白處,隱藏該框框,關(guān)于這一點(diǎn),下面有個(gè)具體的實(shí)現(xiàn)2014-01-01用JavaScript玩轉(zhuǎn)游戲物理(一)運(yùn)動(dòng)學(xué)模擬與粒子系統(tǒng)
也許,三百年前的艾薩克·牛頓爵士(Sir Issac Newton, 1643-1727)并沒(méi)幻想過(guò),物理學(xué)廣泛地應(yīng)用在今天許多游戲、動(dòng)畫(huà)中。2010-06-06