代码：
<!DOCTYPE html><html><head> ???<meta charset="UTF-8"> ???<title>两级联动</title> ???<script> ???????//准备数据 ???????var provinces = [ ???????????["深圳市", "东莞市", "惠州市", "广州市"], ???????????["长沙市", "岳阳市", "株洲市", "湘潭市"], ???????????["厦门市", "福州市", "漳州市", "泉州市"] ???????]; ???????/* ???????????1. 确定事件: onchange ???????????2. 函数: selectProvince() ???????????3: ??????????????得到当前操作元素 ??????????????得到当前选中的是那一个省份 ??????????????从数组中取出对应的城市信息 ??????????????动态创建城市元素节点 ??????????????添加到城市select中 ???????*/ ???????function selectProvince() { ???????????var province = document.getElementById("province"); ???????????//得到当前选中的是哪个省份 ???????????var value = province.value; ???????????//从数组中取出对应的城市信息 ???????????var cities = provinces[value]; ???????????var citySelect = document.getElementById("city"); ???????????//清空select中的option ???????????citySelect.options.length = 0; ???????????for (var i = 0; i < cities.length; i++) { ???????????????var cityText = cities[i]; ???????????????//动态创建城市元素节点 <option>东莞市</option> ???????????????//创建option节点 ???????????????var option1 = document.createElement("option"); //<option></option> ???????????????//创建城市文本节点 ???????????????var textNode = document.createTextNode(cityText);//东莞市 ???????????????//将option节点和文本内容关联起来 ???????????????option1.appendChild(textNode); ?//<option>东莞市</option> ???????????????//添加到城市select中 ???????????????citySelect.appendChild(option1); ???????????} ???????} ???</script></head><body><form action=""> ???<!--选择省份--> ???<label for="province"></label> ???<select onchange="selectProvince()" id="province"> ???????<option value="-1">--请选择--</option> ???????<option value="0">广东省</option> ???????<option value="1">湖南省</option> ???????<option value="2">福建省</option> ???</select> ???<!--选择城市--> ???<label for="city"></label> ???<select id="city"></select></form></body></html>JS练习：两级联动
原文地址：https://www.cnblogs.com/believepd/p/10012642.html