JavaScript实现省市区三级联动

本文实例为大家分享了JavaScript实现省市区三级联动的具体代码，供大家参考，具体内容如下

首先是js

1. $(document).ready(function(){
2. getErpMarketByParentCode(0,'province',province);
3. getErpMarketByParentCode(province,'city',city);
4. getErpMarketByParentCode(city,'area',area);
5. getErpMarketByParentCode(area,'market',market);
6. $('#city').append($('<option>').val('').html('-请选择-')).val('');
7. $('#area').append($('<option>').val('').html('-请选择-')).val('');
8. if($('#market')){
9. $('#market').append($('<option>').val('').html('-请选择-')).val('');
10. }
11. $('#province').change(function(){
12. if($(this).val() == ''){ // 请选择
13. $('#city').empty();
14. $('#area').empty();
15. $('#city').append($('<option>').val('').html('-请选择-')).val('');
16. $('#area').append($('<option>').val('').html('-请选择-')).val('');
17. if($('#market')){
18. $('#market').empty();
19. $('#market').append($('<option>').val('').html('-请选择-')).val('');
20. }
21. return;
22. }
23. getErpMarketByParentCode($(this).val(),'city');
24. $('#area').empty();
25. $('#area').append($('<option>').val('').html('-请选择-')).val('');
26. });
27.  
28. $('#city').change(function(){
29. getErpMarketByParentCode($(this).val(),'area');
30. if($('#market')){
31. $('#market').empty();
32. $('#market').append($('<option>').val('').html('-请选择-')).val('');
33. }
34. });
35.  
36. $('#area').change(function(){
37. getErpMarketByParentCode($(this).val(),'market');
38. });
39. });
40.  
41. function getErpMarketByParentCode(parentCode, id, value){
42. $.ajax({
43. url:'/getErpMarketByParentCode',
44. type:'post',
45. data:{
46. code:parentCode
47. },
48. dataType : 'json',
49. error:function(){
50. alert('error');
51. },
52. success:function(data){
53. var select = $('#' + id);
54. if(select){
55. select.empty();
56. select.append($('<option>').val('').html('-请选择-'));
57. $.each(data.erpMarketList,function(i, erpMarket){
58. select.append($('<option>').val(erpMarket.code).html(erpMarket.name));
59. });
60. select.val(value);
61. }
62. }
63. });
64. }

然后是后台方法

1. @RequestMapping(value = "/getErpMarketByParentCode")
2. public ModelAndView getErpMarketByParentCode(HttpServletRequest request,HttpServletResponse response) throws Exception {
3. String code = request.getParameter("code");
4. List<ErpMarket> erpMarketList = erpMarketService.getErpMarketListByParentCode(code);
5. JSONObject jsonObject = new JSONObject();
6. jsonObject.put("erpMarketList",erpMarketList);
7. response.getWriter().write(jsonObject.toString());
8. return null;
9. }

service方法，是从内从中获取省市区这张表

1. public List<ErpMarket> getErpMarketListByParentCode(String parentCode){
2. Hashtable erpMarketTable = LoadOnStartService.erpMarketTable;//从内存中获取这张表
3. List<ErpMarket> erpMarketList = new ArrayList<ErpMarket>();
4. Iterator its = erpMarketTable.keySet().iterator();
5. while(its.hasNext()){
6. String key = Util.getString(its.next());
7. ErpMarket erpMarket = (ErpMarket)erpMarketTable.get(key);
8. if(parentCode.equals(erpMarket.getParentCode())){
9. erpMarketList.add(erpMarket);
10. }
11. }
12. return erpMarketList;
13. }

省市区的实体类

1. package com.erp.entity;
2.  
3. /**
4. * ErpMarket entity.
5. *
6. * @author MyEclipse Persistence Tools
7. */
8.  
9. public class ErpMarket implements java.io.Serializable {
10.  
11. // Fields
12.  
13. private String code;
14. private String shortCode;
15. private String name;
16. private String level;
17. private String parentCode;
18.  
19. // Constructors
20.  
21. /** default constructor */
22. public ErpMarket() {
23. }
24.  
25. /** full constructor */
26. public ErpMarket(String shortCode, String name, String level, String parentCode) {
27. this.shortCode = shortCode;
28. this.name = name;
29. this.level = level;
30. this.parentCode = parentCode;
31. }
32.  
33. // Property accessors
34.  
35. public String getCode() {
36. return this.code;
37. }
38.  
39. public void setCode(String code) {
40. this.code = code;
41. }
42.  
43. public String getShortCode() {
44. return this.shortCode;
45. }
46.  
47. public void setShortCode(String shortCode) {
48. this.shortCode = shortCode;
49. }
50.  
51. public String getName() {
52. return this.name;
53. }
54.  
55. public void setName(String name) {
56. this.name = name;
57. }
58.  
59. public String getLevel() {
60. return this.level;
61. }
62.  
63. public void setLevel(String level) {
64. this.level = level;
65. }
66.  
67. public String getParentCode() {
68. return this.parentCode;
69. }
70.  
71. public void setParentCode(String parentCode) {
72. this.parentCode = parentCode;
73. }
74.  
75. }

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。