(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);