<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>無標題文檔</title> </head> <body> <form name="form1" method="post" action="login.php"> 國家：<select name="country" id="country"> <option value="0">請選擇國家</option> <option value="1">中國</option> <option value="2">美國</option> <option value="3">法國</option> <option value="4">意大利</option> </select> 省份：<select name="province" id="province"> <option value="0">請選擇省/城市</option> </select> 城市：<select name="city" id="city"> <option value="0">請選擇城市/地區</option> </select> </form> </body> <script type="text/javascript"> var arr_province = ["請選擇省/城市", "北京市", "上海市", "天津市", "重慶市", "深圳市", "廣東省"]; var arr_city = [ ["請選擇城市/地區"], ["東城區", "西城區", "朝陽區", "宣武區", "昌平區", "大興區", "豐台區", "海淀區"], ['寶山區', '長寧區', '豐賢區', '虹口區', '黃浦區', '青浦區', '南匯區', '徐匯區', '盧灣區'], ['和平區', '河西區', '南開區', '河北區', '河東區', '紅橋區', '塘古區', '開發區'], ['俞中區', '南岸區', '江北區', '沙坪壩區', '九龍坡區', '渝北區', '大渡口區', '北碚區'], ['福田區', '羅湖區', '鹽田區', '寶安區', '龍崗區', '南山區', '深圳周邊'], ['廣州市', '惠州市', '汕頭市', '珠海市', '佛山市', '中山市', '東莞市'] ]; var country = document.getElementById('country'); var province = document.getElementById('province'); var city = document.getElementById('city'); // 添加國家監聽事件 country.addEventListener('change',function() { let html = ''; if(this.value == 1){ arr_province.forEach((ele,index) => { html += ` <option value="${index}">${ele}</option> ` }) }else{ html = '<option value="0">請選擇省/城市</option>' } province.innerHTML = html; }) // 添加城市監聽事件 province.addEventListener('change',function(){ let html = ""; arr_city[this.value].forEach((ele,index) => { html += ` <option value="${index}">${ele}</option> ` }) city.innerHTML = html; }) </script> </html>