<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>省市联动</title> <script> var provinces=[ ["深圳市","东菀市","惠州市","广州市"], ["长沙市","岳阳市","株洲市","湘潭市"], ["厦门市","福州市","漳州市","泉州市"] ]; function selectProvince(){ //获取选择的省级 var province=document.getElementById("province"); //获取选择的省级的值 var value=province.value; //通过获取的值从全局数组值获取对应省级之下的市级 var cities=provinces[value]; //获得市级的对象 var citySelect=document.getElementById("city"); citySelect.options.length=0;//清空select中的options //遍历所有的市 for(var i=0;i<cities.length;i++) { var cityText = cities[i]; //创建option节点 var option1=document.createElement("option"); //创建城市文本节点 var textNode=document.createTextNode(cityText); //将option节点和文本内容关联起来 option1.appendChild(textNode); //添加到城市select citySelect.appendChild(option1); } } </script> </head> <body> <!--选择省份--> <select onchange="selectProvince()" id="province"> <option value="-1">--请选择--</option> <option value="0">广东省</option> <option value="1">湖南省</option> <option value="2">福建省</option> </select> <select id="city"> </select> </body> </html>