3.jQuery城市级联插件

 1 <%@ page language="java" contentType="text/html; charset=UTF-8"
 2     pageEncoding="UTF-8"%>
 3 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
 4 <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
 5 <head>
 6  <title></title>
 7  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 8   <script src="script/jquery-1[1].2.6.js" type="text/javascript"></script>
 9   <script src="script/jquery.provincesCity.js" type="text/javascript"></script>
10  <script>
11 /********** 省级数据 **********/
12 var GP =['北京','广东','海外'];
13 /********** 市级数据 **********/
14 var GT = [
15     ['北京1','北京2'],
16     ['广东1','广东2','广东3'],
17     ['阿根廷1','埃及1']
18 ];
19 /********** 市二级数据 **********/
20 var GC =[
21     [
22         ['北京11','北京12','北京13'],
23         ['北京21','北京22']
24     ],
25     [
26         ['广东11','广东12','广东13'],
27         ['广东21','广东22'],
28         ['广东31']
29     ],
30     [
31         ['阿根廷1'],
32         ['埃及1']
33     ]
34 ];
35 
36 //调用插件
37 $(function(){
38     $("#test").ProvinceCity();
39 });
40  </script>
41 
42  <style>
43     #test select{
44         width:100px;
45         margin-left:20px;
46     }
47  </style>
48 </head>
49 <body>
50     <div id="test"></div>
51 </body>
52 </html>

 1 /**
 2  * jQuery :  城市联动插件
 3  * @author   XiaoDong <cssrain@gmail.com>
 4  *             http://www.cssrain.cn
 5  * @example  $("#test").ProvinceCity();
 6  * @params   暂无
 7  */
 8 $.fn.ProvinceCity = function(){
 9     var _self = this;
10     //定义3个默认值,向元素附加数据 jQuery.data();
11     _self.data("province",["请选择", "请选择"]);
12     _self.data("city1",["请选择", "请选择"]);
13     _self.data("city2",["请选择", "请选择"]);
14     //插入3个空的下拉框
15     _self.append("<select></select>");
16     _self.append("<select></select>");
17     _self.append("<select></select>");
18     //分别获取3个下拉框
19     var $sel1 = _self.find("select").eq(0);
20     var $sel2 = _self.find("select").eq(1);
21     var $sel3 = _self.find("select").eq(2);
22     //默认省级下拉
23     if(_self.data("province")){
24         $sel1.append("<option value='"+_self.data("province")[1]+"'>"+_self.data("province")[0]+"</option>");
25     }
26     $.each( GP , function(index,data){
27         $sel1.append("<option value='"+data+"'>"+data+"</option>");
28     });
29     //默认的1级城市下拉
30     if(_self.data("city1")){
31         $sel2.append("<option value='"+_self.data("city1")[1]+"'>"+_self.data("city1")[0]+"</option>");
32     }
33     //默认的2级城市下拉
34     if(_self.data("city2")){
35         $sel3.append("<option value='"+_self.data("city2")[1]+"'>"+_self.data("city2")[0]+"</option>");
36     }
37     //省级联动 控制
38     var index1 = "" ;
39     $sel1.change(function(){
40         //清空其它2个下拉框
41         $sel2[0].options.length=0;
42         $sel3[0].options.length=0;
43         index1 = this.selectedIndex;
44         if(index1==0){    //当选择的为 “请选择” 时
45             if(_self.data("city1")){
46                 $sel2.append("<option value='"+_self.data("city1")[1]+"'>"+_self.data("city1")[0]+"</option>");
47             }
48             if(_self.data("city2")){
49                 $sel3.append("<option value='"+_self.data("city2")[1]+"'>"+_self.data("city2")[0]+"</option>");
50             }
51         }else{
52             $.each( GT[index1-1] , function(index,data){
53                 $sel2.append("<option value='"+data+"'>"+data+"</option>");
54             });
55             $.each( GC[index1-1][0] , function(index,data){
56                 $sel3.append("<option value='"+data+"'>"+data+"</option>");
57             })
58         }
59     }).change();
60     //1级城市联动 控制
61     var index2 = "" ;
62     $sel2.change(function(){
63         $sel3[0].options.length=0;
64         index2 = this.selectedIndex;
65         $.each( GC[index1-1][index2] , function(index,data){
66             $sel3.append("<option value='"+data+"'>"+data+"</option>");
67         })
68     });
69     return _self;
70 };

向元素附加数据，然后取回该数据：

posted on 2017-01-08 23:17 Sharpest 阅读(521) 评论(0) 收藏举报