省市区级联选择器 -TypeScript

省市区级联选择器 -TypeScript

/*!
 * AddressSelector
 * Code By Ahoo Wang
 * Date 2016-05-11 01:51
 * Demo: var addresssInstance=new AddressSelector('province','city','district')
 */
/// 
/// 

/**
 * 省市区 级联 选择器
 */
class AddressSelector {
    /**
    * 省 选择器
    */
    $Province: JQuery;
    /**
    * 市 选择器
    */
    $City: JQuery;
    /**
    * 区 选择器
    */
    $District: JQuery;
    /**
     * 创建省市区选择器实例
     * @param province 省选择器
     * @param city 市选择器
     * @param district 区选择器
     */
    constructor(province: string, city: string, district: string) {
        this.$Province = $(province);
        this.$City = $(city);
        this.$District = $(district);
        this.Init();
    }
    /**
     * 初始化
     */
    Init() {
        this.BindEvent();
        this.InitProvince();
    }
    /**
     * 绑定事件
     */
    BindEvent() {
        this.$Province.on('change', () => {
            this.ProvinceChanged();
        });
        this.$City.on('change', () => {
            this.CityChanged();
        });
    }
    /**
     * 初始化 省
     */
    InitProvince() {
        this.$Province.append(' 请选择省！')
        for (let province of ChinaLocation.Instance.Provinces) {
            let optionStr = `"${province.Id}">${province.Name}`;
            this.$Province.append(optionStr)
        }
    }
    /**
     * 初始化市 Option
     * @param ProvinceId
     */
    InitCityOptions(ProvinceId: number) {
        let citys = ChinaLocation.Instance.GetCitysByProvinceId(ProvinceId);
        this.$City.empty();
        this.$City.append(' 请选择市！')
        for (let city of citys) {
            let optionStr = `"${city.Id}">${city.Name}`;
            this.$City.append(optionStr)
        }
    }
    /**
     * 初始化区 Option
     * @param CityId
     */
    InitDistrictOptions(CityId: number) {
        let districts = ChinaLocation.Instance.GetDistrictByCityId(CityId);
        this.$District.empty();
        this.$District.append(' 请选择区！')
        for (let district of districts) {
            let optionStr = `"${district.Id}">${district.Name}`;
            this.$District.append(optionStr)
        }
    }
    /**
     * 省 Changed
     */
    ProvinceChanged() {
        let ProvinceId: number = this.$Province.val();
        this.InitCityOptions(ProvinceId);
        this.$City.trigger('change');
    }
    /**
     * 市 Changed
     */
    CityChanged() {
        let CityId: number = this.$City.val();
        this.InitDistrictOptions(CityId);
    }
    /**
     * 初始化 省市区 值
     * @param ProvinceId
     * @param CityId
     * @param DistrictId
     */
    InitValues(ProvinceId: number, CityId: number, DistrictId: number) {
        this.$Province.val(ProvinceId).trigger('change');
        this.$City.val(CityId).trigger('change');
        this.$District.val(DistrictId);
    }
}