<!DOCTYPE html> <html lang="zh_CN"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <!--當用戶選定或取消選定時，觸發onchange--> 省：<select onchange="change()" id="pro"> <option>河北省</option> <option>山西省</option> </select> 市：<select id="city"> </select> <script> function change() { //根據省的變化生成對應的市 //1.找到當前被選中的省 var pro = document.getElementById('pro'); //selectedIndex 屬性可設置或返回下拉列表中被選選項的索引號 var cunrrentPro = pro.options[pro.selectedIndex]; //js中清空數組可以給數組length=0 //讓長度等於0因為了讓一個省只有自己的市，不會出現別的省的市 document.getElementById('shi').options.length = 0; //2.根據選中的省來找到對應的市 switch (cunrrentPro.text) { case '河北省': var city = document.getElementById('city'); //select對象數組：options[]，返回包含下拉列表中的所有選項的一個數組 city.options[city.options.length] = new Option('石家庄', 'sjz');//此Option傳的是text和value的值 city.options[city.options.length] = new Option('邢台', 'xt'); break; case '山西省': var city = document.getElementById('city'); city.options[city.options.length] = new Option('太原', 'ty'); city.options[city.options.length] = new Option('大同', 'dt'); break; } } </script> </body> </html>