JavaScript中怎么實(shí)現(xiàn)二級(jí)聯(lián)動(dòng)

發(fā)布時(shí)間：2021-08-09 17:23:57 來源：億速云閱讀：134 作者：Leah 欄目：開發(fā)技術(shù)

這期內(nèi)容當(dāng)中小編將會(huì)給大家?guī)碛嘘P(guān)JavaScript中怎么實(shí)現(xiàn)二級(jí)聯(lián)動(dòng)，文章內(nèi)容豐富且以專業(yè)的角度為大家分析和敘述，閱讀完這篇文章希望大家可以有所收獲。

實(shí)現(xiàn)思路：先寫兩個(gè)<select>標(biāo)簽，用name或id來區(qū)分；寫一個(gè)二維數(shù)組來存放信息；在一級(jí)菜單中使用onchange()事件來動(dòng)態(tài)加載二級(jí)菜單的內(nèi)容。

完整代碼

<html> <head> <meta charset="UTF-8"> <title>簡(jiǎn)單城市二級(jí)聯(lián)動(dòng)</title> </head> <body> <form action="" method="post" name="form1"> <p id="province"> <select name="sltProvince" οnchange="selectCity()"> <option value="">請(qǐng)選擇省份</option> <option value="">山西省</option> <option value="">陜西省</option> <option value="">江西省</option> <option value="">四川省</option> </select> </p> <p id="city"> <select name="sltCity"> <option value="0">請(qǐng)選擇市區(qū)</option> </select> </p> </form> </body> <script type="text/javascript" language="javascript"> var cityInfo = [["請(qǐng)選擇市區(qū)","太原市","呂梁市","臨汾市","運(yùn)城市","陽泉市"], ["請(qǐng)選擇市區(qū)","西安市","咸陽市","漢中市","延安市","榆林市"], ["請(qǐng)選擇市區(qū)","南昌市","九江市","鷹潭市","上饒市","景德鎮(zhèn)市"], ["請(qǐng)選擇市區(qū)","成都市","綿陽市","雅安市","樂山市","眉山市"]]; /*二級(jí)聯(lián)動(dòng)一般使用onchange事件*/ function selectCity(){ /*獲取省份下拉框的對(duì)象*/ var pro = document.form1.sltProvince; /*獲取市區(qū)下拉框的對(duì)象*/ var cit = document.form1.sltCity; /*得到對(duì)應(yīng)得城市數(shù)組，selectedIndex表示下拉框列表的索引值*/ var selectParam = cityInfo[pro.selectedIndex-1]; /*將城市列表的選項(xiàng)只留下第一個(gè)提示選項(xiàng)*/ cit.length = 1; for(var i=0;i<selectParam.length;i++){ /*第一個(gè)selectParam[i]表示城市option中的value值，第二個(gè)selectParam[i]表示文本信息*/ cit[i] = new Option(selectParam[i],selectParam[i]); } } </script></html>

上述就是小編為大家分享的JavaScript中怎么實(shí)現(xiàn)二級(jí)聯(lián)動(dòng)了，如果剛好有類似的疑惑，不妨參照上述分析進(jìn)行理解。如果想知道更多相關(guān)知識(shí)，歡迎關(guān)注億速云行業(yè)資訊頻道。

向AI問一下細(xì)節(jié)

JavaScript中怎么實(shí)現(xiàn)二級(jí)聯(lián)動(dòng)

猜你喜歡

最新資訊

相關(guān)推薦

相關(guān)標(biāo)簽