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

来源：互联网发布：tvb翡翠台直播软件编辑：程序博客网时间：2024/05/21 08:38

从毕业到现在，大大小小的项目做了不少，基本上都是做的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的美妙之处！！!

1 0

tvb翡翠台直播软件

原创粉丝点击

热门问题 老师的惩罚人脸识别我在镇武司摸鱼那些年重生之率土为王我在大康的咸鱼生活盘龙之生命进化天生仙种凡人之先天五行春回大明朝姑娘不必设防，我是瞎子假肢的作用上肢假肢赛姆假肢假肢公司假肢矫形工程专业假肢登顶珠峰第一人哪里有做假肢的智能假肢腿价格多少假肢脚板价格手指假肢佩戴图片假肢品牌排名智能假肢手多少钱小腿假肢多少钱手指假肢安装假肢安装价格大腿假肢多少钱装假肢需要多少钱假肢公司哪家好奥托博克假肢价格假肢康复中心假肢安装标准假肢矫形器价格假肢安装中心装一个假肢多少钱大腿假肢的价格手指少一截做假肢德国奥托博克假肢奥托博克大腿假肢价格古阿扎ovo假胸啊假体胸麦格胸假体真平胸假平胸假胸和真胸的图片男假胸假胸和真胸的区别假胸图片假胸怎么带真胸假胸手感假胸和真胸假胸的手感