使用JavaScript實現下拉列表的聯動
阿新 • • 發佈：2018-12-10
在設計使用者註冊頁面時經常有籍貫等資訊要填寫，填寫這些資訊一般都是先選擇國家->省->市->鎮。
此篇主要講述，當第一個下拉列表中的內容選定之後第二個下拉列表中的內容也隨之改變（例如：當你第一個下拉列表選擇江西時，第二個下拉列表會顯示南昌贛州等城市；當你第一個下拉列表選擇福建時，第二個下拉列表顯示福州廈門等城市。）
在此篇部落格中只使用JavaScript實現不使用任何後臺語言。
code：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>下拉列表的聯動</title> </head> <body> <form action="" method="post" role="form" name="form1"> <div align="center"> <h1>下拉列表的聯動</h1> 省份：<select name="province" id="province" onchange="linkage1() "> <option value="0">選擇大類</option> <option value="1">江西</option> <option value="2">廣東</option> <option value="3">福建</option> <option value="4">雲南</option> <option value="5">湖北</option> </select> 市：<select name="city" id="city" "> <option value="">--選擇城市</option> </select> </div> </form> <script type="text/javascript"> var city = [ ["南昌","贛州"], ["廣州","深圳"], ["福州","廈門"], ["大理","納木錯"], ["武漢","武昌"] ]; function linkage1() { //獲得省份下拉框的物件 const sltProvince = document.form1.province; //獲得城市下拉框的物件 const sltCity = document.form1.city; //得到對應省份的城市陣列 const provinceCity = city[sltProvince.selectedIndex - 1]; //清空城市下拉框，僅留提示選項 sltCity.length=1; //將城市陣列中的值填充到城市下拉框中 for(let i=0; i<provinceCity.length; i++){ sltCity[i+1]=new Option(provinceCity[i],provinceCity[i]); } } </script> </body> </html>
