十年代码生涯一瞬间,代码即人生!
<返回上一级
jQuery实现省市区三级联动
jQuery

jQuery实现省、市、区三级联动的代码网上应该已经挺多了,今天群里一名成员投了篇关于省、市、区三级联动的实现代码,不同的一点是他将代码片段封装成了jQuery插件。虽然文章中没有涉及到和后台的交互,但这不影响我们的学习。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
(function($){
$.fn.citySelect = function(options) {  
  var defaults = {  
   setId : ['#Province' '#City' '#Area'],                //默认id
   stval : ['请选择省份' '请选择城市' '请选择地区'],     //默认值
   czemt : 'i',                               //存值元素
   inpvt : 'input[name^="cho"]',                         //存值文本框 
   intva : true             //初始化所有下拉默认确定
  },
   opts = $.extend(defaults, options),
    _setId = opts.setId,
    _stval = opts.stval,
    _czemt = opts.czemt,
    _inpnt = opts.inpvt,
    len = _setId.length;
  $.fn.removelist = function(options){  //清空
    var removdefa = {  
        removeAll : false,
        thisindex : 0
    },
   optremove = $.extend(removdefa, options);  
  var $_removebox = $(this),
   $_listall = $('ul li' , $_removebox),
   $_listfirst = $('ul li:first' , $_removebox),
   $_listsib = $('ul li:gt(0)' , $_removebox),
   $_vala = $(_czemt , $_removebox),
   $_valb = $(_inpnt , $_removebox);
   if(optremove.removeAll){
    $_listall.remove();
   }else{
    $_listsib.remove();
   }
   $_vala.text(_stval[optremove.thisindex]);
   $_valb.val(_stval[optremove.thisindex]);
   return this;
  };
  $.fn.appendlist = function(options){  //添加
    var appdefa = {  
          theindex : '0'
    },
   optapp = $.extend(appdefa, options);
   var $_appendbox = $(this),
    $_listbox = $('ul' , $_appendbox),
    appendArray = dsy.Items[optapp.theindex],
    appList = '';
   if(typeof(appendArray) == "undefined"return false//如果不存在当前对象返回false
   for(var i = 0; i<appendArray.length;i++){
    appList += '<li><a href="javascript:void(0)" 
alt="'+appendArray[i]+'">'+appendArray[i]+'</a></li>';
   }
   $_listbox.append(appList);
   appList = '';
  };
  function slide(str){ //下拉事件
   var oID = $(str),
       oClass = 'active',
       oList = $('ul' , oID),
       closed;
   oID.click(function(){
       $(this).toggleClass(oClass);
       oList.stop(true,true).slideToggle();
   });
   closed = function(){
       oID.removeClass(oClass);
       oList.stop(true,true).slideUp();
   }
   $("body").click(function(e){
       if(!$(e.target).is(str+" *")){
           closed();
       }
   });
  };
  $.fn.liClick = function(){
    var $_liA = $('li' , _setId[0]),
     $_liB = $('li' , _setId[1]),
     $_liC = $('li' , _setId[2]),
     indA,indB,indC;
    $('li' , _setId[0]).live('click' function(){ //省点击事件
     indA = $('li' , _setId[0]).index(this) - 1;
     var   _valA = $('a' this).attr('alt'), 
      _emeltA = $(_czemt , _setId[0]),
      _inputA = $(_inpnt , _setId[0]);
     _emeltA.text(_valA);
     _inputA.val(_valA);
     $(_setId[1]).removelist({thisindex : 1});
     $(_setId[1]).appendlist({theindex:'0_'+indA});
     $(_setId[2]).removelist({thisindex : 2});
     return indA;
    });
    $('li' , _setId[1]).live('click' function(){ //市点击事件
     indB = $('li' , _setId[1]).index(this) - 1;
     var   _valB = $('a' this).attr('alt'), 
      _emeltB = $(_czemt , _setId[1]),
      _inputB = $(_inpnt , _setId[1]);
     _emeltB.text(_valB);
     _inputB.val(_valB);
     $(_setId[2]).removelist({thisindex : 2});
     $(_setId[2]).appendlist({theindex:'0_'+indA+'_'+indB});     
     return indB;
    });
    $('li' , _setId[2]).live('click'function(){ //区点击事件
     indC = $('li' , _setId[2]).index(this);
     var   _valC = $('a' this).attr('alt'), 
      _emeltC = $(_czemt , _setId[2]),
      _inputC = $(_inpnt , _setId[2]);
     _emeltC.text(_valC);
     _inputC.val(_valC);     
     return indC;
    }); 
  };
  function show(obj){   //大按钮事件
   $(obj).toggleClass('active').find('ul').slideToggle();
  }
  if(opts.intva){
   for(var i = 0 ; i < len; i++) {  //初始化默认值所有值
    $(_setId[i]).removelist({thisindex : i});
    slide(_setId[i]);
   };   
  }
  $(_setId[0]).appendlist({theindex:'0'}); //默认添加省
  $.fn.liClick();
};  
})(jQuery);