溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這期內容當中小編將會給大家帶來有關JavaScript中怎么實現二級聯動，文章內容豐富且以專業的角度為大家分析和敘述，閱讀完這篇文章希望大家可以有所收獲。
實現思路：先寫兩個<select>標簽，用name或id來區分；寫一個二維數組來存放信息；在一級菜單中使用onchange()事件來動態加載二級菜單的內容。
完整代碼
<html> <head> <meta charset="UTF-8"> <title>簡單城市二級聯動</title> </head> <body> <form action="" method="post" name="form1"> <p id="province"> <select name="sltProvince" οnchange="selectCity()"> <option value="">請選擇省份</option> <option value="">山西省</option> <option value="">陜西省</option> <option value="">江西省</option> <option value="">四川省</option> </select> </p> <p id="city"> <select name="sltCity"> <option value="0">請選擇市區</option> </select> </p> </form> </body> <script type="text/javascript" language="javascript"> var cityInfo = [["請選擇市區","太原市","呂梁市","臨汾市","運城市","陽泉市"], ["請選擇市區","西安市","咸陽市","漢中市","延安市","榆林市"], ["請選擇市區","南昌市","九江市","鷹潭市","上饒市","景德鎮市"], ["請選擇市區","成都市","綿陽市","雅安市","樂山市","眉山市"]]; /*二級聯動一般使用onchange事件*/ function selectCity(){ /*獲取省份下拉框的對象*/ var pro = document.form1.sltProvince; /*獲取市區下拉框的對象*/ var cit = document.form1.sltCity; /*得到對應得城市數組，selectedIndex表示下拉框列表的索引值*/ var selectParam = cityInfo[pro.selectedIndex-1]; /*將城市列表的選項只留下第一個提示選項*/ cit.length = 1; for(var i=0;i<selectParam.length;i++){ /*第一個selectParam[i]表示城市option中的value值，第二個selectParam[i]表示文本信息*/ cit[i] = new Option(selectParam[i],selectParam[i]); } } </script></html>
上述就是小編為大家分享的JavaScript中怎么實現二級聯動了，如果剛好有類似的疑惑，不妨參照上述分析進行理解。如果想知道更多相關知識，歡迎關注億速云行業資訊頻道。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
