省市区三级联动插件：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);