<head>
<meta charset="UTF-8">
<title></title>
<script>
/
准备工作 : 准备数据
/
var provinces = [
["深圳市","东莞市","惠州市","广州市"],
["长沙市","岳阳市","株洲市","湘潭市"],
["厦门市","福州市","漳州市","泉州市"]
];
/*

确定事件: onchange函数: selectProvince()

函数里面要搞事情了
得到当前操作元素
得到当前选中的是那一个省份
从数组中取出对应的城市信息

动态创建城市元素节点 添加到城市select中 */ function selectProvince(){ var province = document.getElementById("province"); //得到当前选中的是哪个省份 //alert(province.value); 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++) {

// alert(cities[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> <!--选择省份--> <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>