原生js實(shí)現(xiàn)二級(jí)聯(lián)動(dòng)菜單
更新時(shí)間:2019年11月27日 15:28:41 作者:濮家大少
這篇文章主要為大家詳細(xì)介紹了原生js實(shí)現(xiàn)二級(jí)聯(lián)動(dòng)菜單,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下
本文實(shí)例為大家分享了js二級(jí)聯(lián)動(dòng)菜單的具體代碼,供大家參考,具體內(nèi)容如下
效果如下:
代碼如下:
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>二級(jí)聯(lián)動(dòng)菜單</title> <style> *{ padding: 0px; margin: 0px; } form{ width: 300px; height: 300px; margin: 10px auto; } form select{ width: 140px; height: 50px; text-align: center; line-height: 30px; font-size: 20px; } </style> <script> var x = ["請(qǐng)選擇...","美食","景點(diǎn)","電影"]; var y = [ ["請(qǐng)選擇..."], ["黃燜雞","油燜大蝦","紅燒肉","東坡肉"], ["黃山","泰山","嵩山","華山"], ["烈日灼心","逆戰(zhàn)","無間道","黑金"] ]; window.onload = init; function init(){ var chose1 = document.getElementById("chose1"); var chose2 = document.getElementById("chose2"); chose1.length = x.length; for(var i = 0;i<x.length;i++) { chose1.options[i].text = x[i]; } var index = 0; chose2.length = y[index].length; for(var j = 0;j<y[index].length;j++) { chose2.options[j].text = y[index][j]; } } function change(obj){ var chose2 = document.getElementById("chose2"); chose2.length = y[obj].length; for(var j = 0;j<y[obj].length;j++) { chose2.options[j].text = y[obj][j]; } } </script> </head> <body> <form> <select id="chose1" onchange="change(this.selectedIndex)"></select> <select id="chose2"></select> </form> </body> </html>
以上就是本文的全部內(nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
您可能感興趣的文章:
- js實(shí)現(xiàn)的全國省市二級(jí)聯(lián)動(dòng)下拉選擇菜單完整實(shí)例
- JS實(shí)多級(jí)聯(lián)動(dòng)下拉菜單類,簡單實(shí)現(xiàn)省市區(qū)聯(lián)動(dòng)菜單!
- javascript實(shí)現(xiàn)省市區(qū)三級(jí)聯(lián)動(dòng)下拉框菜單
- 省市區(qū)三級(jí)聯(lián)動(dòng)下拉框菜單javascript版
- jsp從數(shù)據(jù)庫獲取數(shù)據(jù)填充下拉框?qū)崿F(xiàn)二級(jí)聯(lián)動(dòng)菜單的方法
- js實(shí)現(xiàn)簡單的聯(lián)動(dòng)菜單效果
- 全國省市二級(jí)聯(lián)動(dòng)下拉菜單 js版
- js實(shí)現(xiàn)select二級(jí)聯(lián)動(dòng)下拉菜單
- JS簡單實(shí)現(xiàn)多級(jí)Select聯(lián)動(dòng)菜單效果代碼
- 實(shí)例詳解AngularJS實(shí)現(xiàn)無限級(jí)聯(lián)動(dòng)菜單
相關(guān)文章
微信小程序?qū)崿F(xiàn)卡片層疊滑動(dòng)效果
這篇文章主要為大家詳細(xì)介紹了微信小程序?qū)崿F(xiàn)卡片層疊滑動(dòng)效果,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2019-06-06JS實(shí)現(xiàn)控制表格行文本對(duì)齊的方法
這篇文章主要介紹了JS實(shí)現(xiàn)控制表格行文本對(duì)齊的方法,涉及javascript操作表格樣式的相關(guān)技巧,需要的朋友可以參考下2015-03-03js實(shí)現(xiàn)網(wǎng)頁隨機(jī)切換背景圖片的方法
這篇文章主要介紹了js實(shí)現(xiàn)網(wǎng)頁隨機(jī)切換背景圖片的方法,涉及數(shù)組、隨機(jī)函數(shù)與css樣式的調(diào)用技巧,非常具有實(shí)用價(jià)值,需要的朋友可以參考下2014-11-11Js實(shí)現(xiàn)京東無延遲菜單效果實(shí)例(demo)
本篇文章主要介紹了Js實(shí)現(xiàn)京東無延遲菜單效果實(shí)例(demo) ,小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-06-06僅用[]()+!等符號(hào)就足以實(shí)現(xiàn)幾乎任意Javascript代碼
僅用一些符號(hào)就足以實(shí)現(xiàn)幾乎任意Javascript代碼的方法,比較怪異,對(duì)于特殊需要可能用得到。2010-03-03