省市区级联选择器 -TypeScript

省市区级联选择器 -TypeScript

/*!
 * AddressSelector
 * Code By Ahoo Wang
 * Date 2016-05-11 01:51
 * Demo: var addresssInstance=new AddressSelector('province','city','district')
 */
/// <reference path="../scripts/typings/jquery/jquery.d.ts" />
/// <reference path="chinalocation.ts" />

/**
 * 省市区 级联 选择器
 */
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('<option value="0"> 请选择省！</option>')
        for (let province of ChinaLocation.Instance.Provinces) {
            let optionStr = `<option value="${province.Id}">${province.Name}</option>`;
            this.$Province.append(optionStr)
        }
    }
    /**
     * 初始化市 Option
     * @param ProvinceId
     */
    InitCityOptions(ProvinceId: number) {
        let citys = ChinaLocation.Instance.GetCitysByProvinceId(ProvinceId);
        this.$City.empty();
        this.$City.append('<option value="0"> 请选择市！</option>')
        for (let city of citys) {
            let optionStr = `<option value="${city.Id}">${city.Name}</option>`;
            this.$City.append(optionStr)
        }
    }
    /**
     * 初始化区 Option
     * @param CityId
     */
    InitDistrictOptions(CityId: number) {
        let districts = ChinaLocation.Instance.GetDistrictByCityId(CityId);
        this.$District.empty();
        this.$District.append('<option value="0"> 请选择区！</option>')
        for (let district of districts) {
            let optionStr = `<option value="${district.Id}">${district.Name}</option>`;
            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);
    }
}