/**

 省市区县级联

 */

 (function($){

     /*

     *

     *获取ele的相对元素

     *

     **/

     function CssFirstElement(ele, css) {

         ele = $(ele);

         if (!ele) {

             var event = event ? arguments[0] : window.event;

             ele = event.srcElement ? event.srcElement : event.target;

             ele = $(ele);

         }

         var targetInpage;

         if ((typeof css == 'string') && css.constructor == String && css.substr(0, "css:#".length) == "css:#") {

             //以css:# 开头，是一个ID选择器

             targetInpage = $( $(css.substring(4))[0] );

         } else if ((typeof css == 'string') && css.constructor == String && css.substr(0, "css:".length) == "css:") {

             //以css: 开头，是一个基于元素的父级元素

             var css0 = css.substring(4);

             if (css0.split(' ').length==1) {

                 var parentCss = css0.substring(0, css0.indexOf(' '));

                 var eleCss = css0.substring(css0.indexOf(' ')).replace(/(^\s*)|(\s*$)/g, "");

                 targetInpage = ele.parents(eleCss + ":first");

             } else {

                 var parentCss = css0.substring(0, css0.indexOf(' '));

                 var eleCss = css0.substring(css0.indexOf(' ')).replace(/(^\s*)|(\s*$)/g, "");

                 targetInpage = ele.parents(parentCss+":first").find(eleCss);

             }

         } else if ((typeof css == 'string') && css.constructor == String) {

             targetInpage = $(css);

         } else {

             //对象直接返回

             return [];

         }

         return targetInpage.length > 0 ? $(targetInpage.get(0)) : [];

     }

     function SelectData(element) {

         this.element = element;//元素

         this.optionUrl = element.attr("data-optionUrl");//加载选项的url

         this.defaultValue = element.attr("data-defaultValue");//加载选项试的默认值

         this.display = element.attr("data-display");//返回对象的 option 显示的键

         this.value = element.attr("data-value");//返回对象的 option 绑定的键

         this.changeTarget = CssFirstElement(element, element.attr("data-changeTarget"));//元素选择改变后，触发目标元素重新加载选项

         this.showAll = element.attr("data-showAll");//是否显示全部选项

         this.immediately = element.attr("data-immediately");//是否立即加载选项

         this.param = element.attr("data-param");//请求时携带的参数

         //有需要触发改变选项的目标，就添加change事件，触发目标请求时，携带的参数

         if (this.changeTarget.length > 0) {

             this.element.on("change.selectDataFill",$.proxy(this.changeEvent,this));

         }

         this.element.data("SelectDataFillObj",this);

     }

     SelectData.prototype = {

         changeEvent: function () {

             this.changeTarget.attr("data-param",

                 this.element.get(0).name + "=" + this.element.get(0).value);

             this.changeTarget.data("SelectDataFillObj").empty();

             var targetW=this.changeTarget;

             while (true) {

                 targetW = targetW.data("SelectDataFillObj").changeTarget;

                 if (targetW && targetW.length>0) {

                     targetW.data("SelectDataFillObj").empty();

                 } else {

                     break;

                 }

             }

             this.changeTarget.data("SelectDataFillObj").LoadData();

         },

         empty: function () {

             this.element.empty();

             if (this.showAll) {

                 $("<option value=\"\">全部</option>").appendTo(this.element);

             }

         },

         FillDataSuccess: function (data) {

             debugger;

             var element = this.element;

             this.empty();

             for (var i = 0; i < data.list.length; i++) {

                 var item = data.list[i];

                 $("<option value=\"" + item[this.value] + "\" " +

                     (item[this.value] == this.defaultValue ? "selected" : "") + ">" +

                     item[this.display] + "</option>").appendTo(element);

             }

             if (this.element.val()!='') {

                 this.element.trigger("change.selectDataFill");

             }

         },

         LoadData: function () {

             $.getJSON(this.optionUrl,this.element.attr("data-param")).success($.proxy(this.FillDataSuccess, this));

         }

     };

     $.fn.SelectDataFill = function () {

         this.each(function (index, element) {

             var element = $(element);

             var obj = new SelectData(element);

             if (obj.immediately) {

                 obj.LoadData();

             }

         });

     }

 })(jQuery);

 <td colspan="3">

     <select name="ProvinceId"

             data-optionUrl="/BasicPlugin/Area/ProvinceJson"

             data-defaultValue="3"

             data-display="Name"

             data-value="Id"

             data-changeTarget="css:td select[name=CityId]"

             data-showAll="true"

             data-immediately="true">

         <option value="">请选择</option>

     </select>

     <select name="CityId"

             data-optionUrl="/BasicPlugin/Area/CityJson"

             data-defaultValue="1"

             data-display="Name"

             data-value="Id"

             data-changeTarget="css:td select[name=DistrictId]"

             data-showAll="true">

         <option value="">请选择</option>

     </select>

     <select name="DistrictId"

             data-optionUrl="/BasicPlugin/Area/DistrictJson"

             data-defaultValue="1"

             data-display="Name"

             data-value="Id"

             data-changeTarget="css:td select[name=StreetId]"

             data-showAll="true">

         <option value="">请选择</option>

     </select>

         <select name="StreetId"

                 data-optionUrl="/BasicPlugin/Area/StreetJson"

                 data-defaultValue="1"

                 data-display="Name"

                 data-value="Id"

                 data-showAll="true">

         <option value="">请选择</option>

     </select>

 </td> 

 {

     list:[

         {ID:1,Name:"名称",Code:"001"},

         {ID:1,Name:"名称",Code:"001"}

     ]

 }