javascript基于DOM实现省市级联下拉框的方法

这篇文章主要介绍了javascript基于DOM实现省市级联下拉框的方法,可实现选择省份后出现对应城市下拉框选项的功能,非常具有实用价值,需要的朋友可以参考下

本文实例讲述了javascript基于DOM实现省市级联下拉框的方法。分享给大家供大家参考。具体实现方法如下：

1. <html xmlns="http://www.w3.org/1999/xhtml"> 
2. <head> 
3. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
4. <title>省市级联下拉框</title> 
5. <script type="text/javascript"> 
6. var provs = { "江西省": ["南昌市", "景德镇", "九江", "鹰潭", "萍乡", "新馀", "赣州", "吉安", "宜春", "抚州", "上饶"], 
7. "福建省": ["福州", "厦门", "莆田", "三明", "泉州", "漳州", "南平", "龙岩", "宁德"], 
8. "河北省": ["石家庄", "邯郸", "邢台", "保定", "张家口", "承德", "廊坊", "唐山", "秦皇岛", "沧州", "衡水"] 
9. }; 
10. function loadProv() { 
11. //加载省份数据 
12. var prov = document.getElementById("prov"); 
13. for (var key in provs) { 
14. var provName = key; 
15. var optProv = document.createElement("option"); 
16. optProv.value = provName; 
17. optProv.innerText = provName; 
18. prov.appendChild(optProv); 
19. } 
20. } 
21. function provChange() { 
22. var prov = document.getElementById("prov"); 
23. var city = document.getElementById("city"); 
24. var provName = prov.value; 
25. //如果没有选择省份，则把城市下拉框隐藏 
26. if (provName == "none") { 
27. city.style.display = "none"; 
28. return; 
29. } 
30. else { 
31. city.style.display = ""; 
32. } 
33. var citys = provs[provName]; 
34. //city.options.length = 0; 
35. //用这种方法也可以清空原始列表 
36. //清空城市的原始数据 
37. for (var i = city.childNodes.length - 1; i >= 0; i--) { 
38. var child = city.childNodes[i]; 
39. city.removeChild(child); 
40. } 
41. //添加新的城市数据 
42. for (var i = 0; i < citys.length; i++) { 
43. var optCity = document.createElement("option"); 
44. optCity.value = citys[i]; 
45. optCity.innerText = citys[i]; 
46. city.appendChild(optCity); 
47. } 
48. } 
49. </script> 
50. </head> 
51. <body onload="loadProv()"> 
52. <select id="prov" onchange="provChange()"> 
53. <option value="none">请选择省</option> 
54. </select> 
55. <select id="city" style="display:none"></select> 
56. </body> 
57. </html> 

希望本文所述对大家的javascript程序设计有所帮助。