有了上一个博客的基础，我们现在来做一个地址插件：
首先还是Area.xml文件，这里就不展示了：
HTML文件：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> #province{ margin: 4px; } #city{ margin: 4px; } #country{ margin: 4px; } </style> <script type="text/javascript" src="jquery-1.8.3.js"></script> <script type="text/javascript" src="jquery.address.js"></script> <script type="text/javascript"> $(function(){ $("#address").getAddress(); }) </script> </head> <body> <div id="address"></div> </body> </html>
JS插件：
(function($){ $.fn.getAddress = function(options){ var settings = $.extend({ url:"Area.xml", province:"province", city:"city", country:"country", attrName:"name", attrValue:"value" },options||{}); var data; $.get(settings.url,function(value){ data = value; //获得省份数据 getNode(settings.province,ps); }); var ps = $("<select id='province'><option>请选择省份</option><select>"); var cis = $("<select id='city'><option>请选择城市</option><select>"); var cns = $("<select id='country'><option>请选择地区</option><select>"); this.append(ps); this.append(cis); this.append(cns); //当点击省份时，获得下面的city ps.on("change",function(){ cis.find("option:gt(0)").remove();//先清空后面的select cns.find("option:gt(0)").remove(); getNode(settings.province+"[value="+$(this).attr(settings.attrValue)+"] "+settings.city,cis); }); //当点击城市时，获得下面的地区 cis.on("change",function(){ cns.find("option:gt(0)").remove(); getNode(settings.city+"[value="+$(this).attr(settings.attrValue)+"] "+settings.country,cns); }); function getNode(node,id){ $(data).find(node).each(function(){ id.append(creteOption($(this))); }); } function creteOption(obj){ return "<option value="+obj.attr(settings.attrValue)+">"+obj.attr(settings.attrName)+"</option>"; } } })(jQuery)