一个jquery 的地址联动插件

有了上一个博客的基础，我们现在来做一个地址插件：

首先还是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)

一个jquery 的 地址联动插件

HTML文件：

JS插件：

一个jquery 的地址联动插件

HTML文件：　　