学习 自 于 http://blog.csdn.net/Elenal/article/details/51493510
<!DOCTYPE html><html lang="en"><head> ???<meta charset="UTF-8"> ???<meta name="viewport" content="width=device-width, initial-scale=1.0"> ???<meta http-equiv="X-UA-Compatible" content="ie=edge"> ???<title>Document</title></head><body> ???????<form action="" name="theform"> ???????????????<select name="province" onchange="getCity()"> ???????????????????<option value = "0">请选择所在的省份</option> ???????????????????<option value="1">浙江省</option> ???????????????????<option value="2">山东省</option> ???????????????????<option value="3">广东省</option> ????????????????????<option value="4">甘肃省</option> ????????????????</select> ???????????????????????<select id="city" onchange="getQu()"> ???????????????????<option value = "0">请选择所在的城市</option> ???????????????</select> ???????????????????????<select name = "qu"> ???????????????????<option value = "0">请选择所在的县区</option> ???????????????</select> ???????????????</form> ???????????<script> ???//按照省份的下拉列表的顺序定义二维数组 ?将城市列表对应到省份下var city=[ ???????["杭州市","温州市","宁波市","绍兴市"],//浙江省 ???????["济南市","青岛市","济宁市","潍坊市"],//山东省 ???????["广州市","潮阳","澄海","潮州"],//广东省 ???????["兰州市","白银","敦煌","定西"]//甘肃省 ???]; ???//县区数组 ???var qu=[ ???????[ ???????????????["杭州一区","杭州二区"], ???????????????["温州一区","温州二区"], ???????????????["宁波一区","宁波二区"], ???????????????["绍兴一区","绍兴二区"] ???????], ???????[ ???????????????["济南一区","济南二区"], ???????????????["青岛一区","青岛二区"], ???????????????["济宁一区","济宁二区"], ???????????????["潍坊一区","潍坊二区"], ???????], ???????[ ???????????????["广州一区","广州二区"], ???????????????["潮阳一区","潮阳二区"], ???????????????["澄海一区","澄海二区"], ???????????????["潮州一区","潮州二区"], ???????], ???????[ ???????????????["兰州一区","兰州二区"], ???????????????["白银一区","白银二区"], ???????????????["敦煌一区","敦煌二区"], ???????????????["定西一区","定西二区"], ???????] ???]; ???var getProvince = document.forms[‘theform‘].province; ???var City = document.forms[0].city; ???var Qu = document.forms[0].qu; ???function getCity(){ ???????// 初始化 ???????Qu.length = 1; ???????City.length = 1; ???????// 获得 省份选择的项（索引值，0开始） ???????var getSelectIndex = getProvince.selectedIndex; ???????// 匹配选择省下面的 市区 ???????var proCity = city[getSelectIndex-1]; // ????????console.log( proCity) ???????for( var i=0; i<proCity.length; i++){ ???????????City[i+1] = new Option(proCity[i],getSelectIndex) ???????} ???} ???function getQu(){ ???????var getSelectIndex = getProvince.selectedIndex; ?// 省 ???????var getCitySelectedIndex = City.selectedIndex; // 市 ???????console.log( getCitySelectedIndex ) ???????var cityQu = qu[getSelectIndex - 1][ getCitySelectedIndex - 1]; ???????console.log( cityQu ) ???????for( var i=0; i<cityQu.length; i++){ ???????????Qu[i+1] = new Option(cityQu[0],getCitySelectedIndex) ???????} ???}</script>原生js实现三级联动
原文地址：http://www.cnblogs.com/ar13/p/8000689.html