自己做jQuery开源插件之一：三级联动插件

从毕业到现在，大大小小的项目做了不少，基本上都是做的web，记得刚参加工作的时候对前端技术不怎么了解，还是以拖服务器控件为主，几乎不考虑用户体验，后来随着工作经验的不断积累，对前端技术逐渐开始感兴趣，并且不断深入学习，到现在完全痴迷于jquery，以至于现在做项目整个做下来看不到一个服务器端控件，全部都是客户端控件搭配jquery完成数据的获取、展示和提交。最近这一年对写jQuery插件特别感兴趣，总觉得自己封装的jQuery插件就是好用，看着公司很多个项目都用上了自己的插件，心里很有成就感，下面我就花一段时间整理一下我写过的各种jQuery插件，这一系列的文章适合熟悉jQuery语法的开发者阅读，初学者可能看得会比较吃力，我也不会一句一句的讲解代码，好了，废话不多说了，欢迎大家一起讨论和学习。      

今天讲的第一个插件是比较简单的省市区三级联动插件，这里我想实现的效果是通过$("#DivID").MyAreaSelectPlugin ()直接在任意一个div里面显示一个三级联动插件，也就是说我们需要扩展 jQuery 元素集来提供MyAreaSelectPlugin ()这个方法，好了，首先我们需要一个js文件存放全国的省市区数据，这里我们以json格式保存，文件命名data.js，如下所示：

然后我们再新建一个Myareaselect.js文件用来写插件的代码，打开这个js文件，我们先写好jQuery插件的标准框架，如下所示：

(function ($) {
    $.fn.MyAreaSelectPlugin = function () {
        return this.each(function () { 
           //此处写插件的核心代码
        })
    }
})(jQuery)

然后我们开始写插件的核心代码，本人写js代码习惯把几个js函数封装成一个json对象，这样子代码看上去会比较清爽，也更方便调用，所以我们先在MyAreaSelectPlugin 主函数里定义这样一个json对象，把自定义的方法都放在里面，如下所示：

$.fn.MyAreaSelectPlugin = function () {
                var methods = {
                    Init: function () {
                        $(this).append("<select id=\"S_P\"></select>");
                        $(this).append("<select id=\"S_C\"></select>");
                        $(this).append("<select id=\"S_A\"></select>");
                        methods.InitProvince();
                    },
                    InitProvince: function () {
                        $.each(_areaselect_data['p'], function (index, value) {
                            $("#S_P").append("<option value=" + value + ">" + value + "</option>");
                        });
                        methods.Bind("C", $("#S_P").val());
                        methods.Bind("A", $("#S_P").val() + "-" + $("#S_C").val());
                        $("#S_P").change(function () {
                            methods.Bind("C", $("#S_P").val());
                        });
                    },
                    Bind: function (type, SelectValue) {
                        if (type == "C") {
                            $("#S_C").empty();
                            $.each(_areaselect_data['c'][SelectValue], function (index, value) {
                                $("#S_C").append("<option value=" + value + ">" + value + "</option>");
                            });
                            methods.Bind("A", $("#S_P").val() + "-" + $("#S_C").val());
                            $("#S_C").change(function () {
                                methods.Bind("A", $("#S_P").val() + "-" + $("#S_C").val());
                            });
                        }
                        if (type == "A") {
                            $("#S_A").empty();
                            if (_areaselect_data['a'][SelectValue] != null) {
                                $.each(_areaselect_data['a'][SelectValue], function (index, value) {
                                    $("#S_A").append("<option value=" + value + ">" + value + "</option>");
                                });
                            }
                        }
                    }
                };
                return this.each(function () {
                    //此处写插件的核心代码
}); }

如上所示，我们定义了一个名为methods的json对象，里面写了三个js方法，分别是Init()、InitProvince()和Bind()，代码我就不一一讲解了，相信大家应该都能看懂，就是从data.js文件中获取json数据，然后用each()遍历，绑定到select控件上，通过select控件的change事件实现联动触发。

    好了，代码写到这里，已经差不多快完成了，下面就是在return this.each(function(){})函数里调用就可以了（其实这里可以不使用return this.each()返回，因为这个插件作用于单个确定的对象，所以可以直接return this返回即可），代码如下所示：

return this.each(function () {
                    methods.Init.call(this);
                });

这边我直接通过javascript中的call()方法将当前调用的对象传入此方法，至此代码全部完成，至于对call()方法不了解的童鞋可以去百度，顺便再看一下和apply()方法的区别，这里不再赘述。
最后，我们测试一下，新建一个aspx或者html页面，在页面上引用jquery.js、data.js和Myareaselect.js三个文件，然后书写如下代码：

   $(function () {
            $("#divtest").MyAreaSelectPlugin();
        });

这里的divtest是你打算放置三级联动控件的div的id，运行页面，一切OK！



         很多人都搞不懂我为什么要花大量的时间去写jQuery插件，网上现在jQuery插件一大把，拿来用就是了，完全没必要自己写，我想说的是，别人写的再好那也只是别人的，你用100次别人的插件所学到的知识都比不上你自己写一个jQuery插件，只有自己动手去写，你才会发现jQuery的美妙之处！！!