Javascript实应用之联动菜单实现地区选择

一、实现原理:

通过父下拉列表框的onchange事件获取相应的数据填充到对应的子下拉列表框中。

二、步骤:

1、先在页面中写好需要实现联动的下拉列表
  1. <div class="area" id="areaWrap">
  2. <select name="province" id="province"></select>
  3. <select name="city" id="city"></select>
  4. <select name="county" id="county"></select>
  5. </div>
2、通过javascript实现联动效果:
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  5. <title>联动菜单</title>
  6. <style type="text/css">
  7. select{padding:3px;border:1px solid #ccc;}
  8. </style>
  9. </head>
  10. <body>
  11. <div class="area">
  12. <select name="province" id="province"></select>
  13. <select name="city" id="city"></select>
  14. <select name="county" id="county"></select>
  15. </div>
  16. <script type="text/javascript">
  17. window.onload = function(){
  18. new Area({province:"province"});
  19. }
  20. //定义地区对象
  21. function Area(options)
  22. {
  23. this.options = options; //自定义设置
  24. this.init();
  25. }
  26. Area.prototype = {
  27. //默认设置
  28. defaults:{
  29. province:'province', //省级下拉列表框的选择器ID
  30. city:'city', //市级下拉列表框的选择器ID
  31. county:'county', //地区下拉列表框的选择器ID
  32. provinceValue:'北京', //省份默认值
  33. cityValue:'北京市', //城市默认值
  34. countyValue:'东城区', //地区默认值
  35. },
  36. //省市区数据对象
  37. data:{
  38. 'province':[
  39. {"id":11,"name":"北京","pid":0},
  40. {"id":22,"name":"浙江","pid":0},
  41. ],
  42. 'city':[
  43. {"id":1100,"name":"北京市","pid":11},
  44. {"id":2200,"name":"杭州市","pid":22},
  45. {"id":2210,"name":"宁波市","pid":22},
  46. ],
  47. 'county':[
  48. {"id":"110000", "name":"东城区", "pid":1100},
  49. {"id":"110010", "name":"西城区", "pid":1100},
  50. {"id":"110010", "name":"朝阳区", "pid":1100},
  51. {"id":"220010", "name":"上城区", "pid":2200},
  52. {"id":"220020", "name":"下城区", "pid":2200},
  53. {"id":"220030", "name":"西湖区", "pid":2200},
  54. {"id":"221010", "name":"海曙区", "pid":2210},
  55. {"id":"221020", "name":"江东区", "pid":2210},
  56. {"id":"221030", "name":"江北区", "pid":2210},
  57. ]
  58. },
  59. //初始化操作
  60. init:function(){
  61. var self = this;
  62. this._self = this;
  63. this.options = this.extends(this.options, this.defaults);
  64. this.fill(this.options.province, this.options.provinceValue, 0);
  65. this.fill(this.options.city, this.options.cityValue, 11);
  66. this.fill(this.options.county, this.options.countyValue, 1100);
  67. var provinceSelector = document.getElementById(this.options.province);
  68. var citySelector = document.getElementById(this.options.city);
  69. var countySelector = document.getElementById(this.options.county);
  70. provinceSelector.onchange = function(){
  71. var provinceVal = this.value;
  72. self.fill(self.options.city, undefined, provinceVal);
  73. var cityVal = document.getElementById(self.options.city).value;
  74. self.fill(self.options.county, undefined, cityVal);
  75. }
  76. citySelector.onchange = function(){
  77. var cityVal = this.value;
  78. self.fill(self.options.county, undefined, cityVal);
  79. }
  80. },
  81. //将默认设置与自定义设置合并
  82. extends:function(objA, objB){
  83. var opts = {};
  84. opts = objB;
  85. for(property in objA)
  86. {
  87. if(typeof objA[property] != 'undefined')
  88. {
  89. opts[property] = objA[property];
  90. }
  91. }
  92. return opts;
  93. },
  94. //数据填充
  95. fill:function(obj, defaultValue, pid)
  96. {
  97. var html = '';
  98. var data = this.data[obj];
  99. if(!data)
  100. {
  101. return ;
  102. }
  103. for(i=0;i<data.length;i++)
  104. {
  105. if((pid != 'undefined') && (data[i].pid == pid))
  106. {
  107. if(data[i].id == defaultValue || data[i].name == defaultValue)
  108. {
  109. html += '<option selected="selected" value="'+data[i].id+'">'+data[i].name+'</option>';
  110. }
  111. else{
  112. html += '<option value="'+data[i].id+'">'+data[i].name+'</option>';
  113. }
  114. }
  115. }
  116. document.getElementById(obj).innerHTML = html;
  117. },
  118. }
  119. </script>
  120. </body>
  121. </html>

效果:
初始化:

选择省份:

选择城市:

注:
只要将全国省市区的数据写在data中,就可以完整的省市区联动功能。