JS练习：两级联动
代码：
<!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>
