當前位置：
首頁 >
JavaScript实现二级下拉菜单联动
發布時間：2023/12/16
35
豆豆
生活随笔
收集整理的這篇文章主要介紹了
JavaScript实现二级下拉菜单联动
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
實現效果
選擇相應的省份，二級菜單默認顯示省會城市，同時可以選擇其他城市。
源碼
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Title</title><script>/*** 實現二級菜單級聯*/var provinces=[{id:1001,name:'江蘇省',cities:[{id:1,name:'南京市'},{id:2,name:'蘇州市'},{id:3,name:'揚州市'},{id:4,name:'徐州市'},{id:5,name:'常州市'}]},{id:1002,name:'山東省',cities:[{id:1,name:'濟南市'},{id:2,name:'青島市'},{id:3,name:'威海市'},{id:4,name:'煙臺市'},{id:5,name:'德州市'}]},{id:1003,name:'廣東省',cities:[{id:1,name:'廣州市'},{id:2,name:'東莞市'},{id:3,name:'青遠市'},{id:4,name:'佛山市'},{id:5,name:'深圳市'}]}];window.onload = function(){var province = document.getElementById("province");var city = document.getElementById("city");province.onchange = function(){// 清除之前city下拉框內的數據,只留下第一個optionif(city.length>1){city.length = 1;}var selected = provinces[province.selectedIndex-1]; //被選中省份的JSON對象for(var i=0;i<selected.cities.length;i++){//城市的name作為文本，城市的id作為value,創建新的option對象var option = new Option(selected.cities[i].name,selected.cities[i].id); city.add(option);//將option對象添加到city的末尾}city.selectedIndex = 1; //默認顯示第二個option，即省會城市 }}</script> </head> <body>省份：<select id = "province"><option value="0">--請選擇省份--</option><option value="1">江蘇省</option><option value="2">山東省</option><option value="3">廣東省</option></select>城市：<select id="city"><option value="0">--請選擇城市--</option></select></body> </html>?
總結
以上是生活随笔為你收集整理的JavaScript实现二级下拉菜单联动的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： Allegro更新铜皮方法
- 下一篇： SpringCloudAlibaba——