<!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>