省市区三级联动插件：app-jquery-cityselect.js

(function ($)
{
    $.fn.cityselect = function (options)
    {
        var settings = $.extend ({}, options);
        
        this.empty ();
        
        var provinceId, provinceName, cityId, cityName;
        
        if (settings.loadDefault)
        {
            var defaultData = settings.loadDefault ();
            
            provinceId = defaultData.provinceId;
            provinceName = defaultData.provinceName;
            cityId = defaultData.cityId;
            cityName = defaultData.cityName;
        }
        
        var provinceInput = $ ('<select class="form-control" style="width:150px"></select>');
        var cityInput = $ ('<select class="citySel form-control" style="width: 150px;margin-left: 10px"></select>');
        
        this.addClass ("input-append");
        this.append (provinceInput);
        this.append (cityInput);
        
        if (settings.loadProvince)
        {
            
            var provinceList = settings.loadProvince ();
            $.each (provinceList, function (i, p)
            {
                if (i == 0)
                {
                    if (settings.areaInput)
                    {
                        settings.areaInput.val (p.id);
                    }
                    if (settings.onAreaIdChanged)
                    {
                        settings.onAreaIdChanged (p.id);
                    }
                    if (settings.onProvinceChanged)
                    {
                        settings.onProvinceChanged (p.id, p.name);
                    }
                }
                var node = $ ('<option value="{0}">{1}</option>'.format (p.id, p.name));
                if (provinceId && p.id == provinceId)
                {
                    node.attr ("selected", "selected");
                    setProvinceInput (p.id);
                }
                provinceInput.append (node);
            });
        }
        else
        {
            throw "必须设置 loadProvince 回调函数";
        }
        
        provinceInput.on ("change", function (e, d)
        {
            var selected = $ (this).find ("option:selected");
            
            if (settings.areaInput)
            {
                settings.areaInput.val (selected.val ());
            }
            if (settings.onAreaIdChanged)
            {
                settings.onAreaIdChanged (selected.val ());
            }
            if (settings.onProvinceChanged)
            {
                settings.onProvinceChanged (selected.val (), selected.text ());
            }
            
            setProvinceInput (selected.val ());
        });
        
        function setProvinceInput (provinceId)
        {
            if (settings.loadCity)
            {
                
                var cityList = settings.loadCity (provinceId);
                
                cityInput.empty ();
                $.each (cityList, function (i, p)
                {
                    if (i == 0)
                    {
                        if (settings.areaInput)
                        {
                            settings.areaInput.val (p.id);
                        }
                        if (settings.onAreaIdChanged)
                        {
                            settings.onAreaIdChanged (p.id);
                        }
                        if (settings.onCityChanged)
                        {
                            settings.onCityChanged (p.id, p.name);
                        }
                    }
                    var node = $ ('<option value="{0}">{1}</option>'.format (p.id, p.name));
                    if (cityId && p.id == cityId)
                    {
                        node.attr ("selected", "selected");
                    }
                    cityInput.append (node);
                    
                });
                
            }
            else
            {
                throw "必须设置 loadCity 回调函数";
            }
            
        }
        
        cityInput.on ("change", function (e, d)
        {
            var selected = $ (this).find ("option:selected");
            
            if (settings.areaInput)
            {
                settings.areaInput.val (selected.val ());
            }
            if (settings.onAreaIdChanged)
            {
                settings.onAreaIdChanged (selected.val ());
            }
            if (settings.onCityChanged)
            {
                settings.onCityChanged (selected.val (), selected.text ());
            }
        });
        
        return this;
        
    };
    
}) (jQuery);