js動態省市縣鄉村的聯動詳細介紹
阿新 • • 發佈:2018-12-15
/* * 五級聯動 * provId 省下拉框的id 為了擺放拼接的字串 * cityId 市下拉框的id * countyId 縣下拉框的id * townId 鄉下拉框的id * villageId 村拉框的id * dataprovId 為了返回資料時有預設的選中狀態的值 * datacityId cityParentId 市的父級id :省的id 一下是為了修改返回資料時下拉框有內容 * datacountyId countyParentId 縣的父級id * datatownId townParentId 鄉的父級id * datavillageId villageParentId 村的父級id */ function showRegion(provId, cityId, countyId, townId, villageId,dataprovId, datacityId, datacountyId, datatownId, datavillageId) { /* * 存放市縣鄉村的父級id */ var cityParentId = dataprovId;//市的父級id :省的id 一下是為了修改返回資料時下拉框有內容 var countyParentId= datacityId;//縣的父級id var townParentId= datacountyId;//鄉的父級id var villageParentId= datatownId;//村的父級id /* * 來搜尋省 */ searchByParentid(provId); // stringOption(providlist, provId); if (cityParentId != null) { //預設選定給定的內容 $("#"+provId).val(dataprovId); //$("#"+provId+" option[value='"+dataprovId+"']").attr("selected", "selected") //$("#prov option[value='13']").prop("selected", "selected"); //$("#prov").val("13"); //$("#prov option:contains('河北省')").attr("selected", true); //$("#prov").get(0).selectedIndex = 13; //$("#prov").find("option[value='13']").attr("selected",true); //為了搜尋出當前資料 searchByParentid(cityId,cityParentId); //預設選定給定的內容 $("#"+cityId).val(datacityId); } if (countyParentId != null) { //為了搜尋出所需省市縣的內容 searchByParentid(countyId,countyParentId); //預設選定給定的內容 $("#"+countyId).val(datacountyId); } if (townParentId != null) { //為了搜尋出所需省市縣的內容 searchByParentid(townId,townParentId); //預設選定給定的內容 $("#"+townId).val(datatownId); } if (villageParentId != null) {//為了搜尋出所需省市縣的內容 searchByParentid(villageId,villageParentId); //預設選定給定的內容 $("#"+villageId).val(datavillageId); } /* * 省變化載入市 */ changeRegion(provId, cityId) /* * 省變化載入市 */ changeRegion(cityId, countyId) /* * 省變化載入市 */ changeRegion(countyId, townId) /* * 省變化載入市 */ changeRegion(townId, villageId) } /* * 根據父id搜尋資料list id 搜尋出資料後襬放的位置 Parentid 根據父級id來搜尋 */ function searchByParentid(id, Parentid) { myajax = $.ajax({ type : "post", url : basePath + "/region/searchByparentId.do", async: false, dataType : 'json', data : { re_parent : Parentid, }, success : function(data) { var options = ""; $.each(data, function(index, item) { options += "<option value=" + item.id + ">" + item.re_name + "</option>"; }); $("#" + id).html(options); }, error : function(data, type, err) { alert("錯誤型別:" + type + "; 錯誤資訊:" + err); } }); } /* * 通過遍歷來進行拼接option下拉框 */ function stringOption(data, id) { var options = ""; $.each(data, function(index, item) { options += "<option value=" + item.id + ">" + item.re_name + "</option>"; }); $("#" + id).html(options); } /* * 下拉框改變 後 搜尋下一級的資料 id是改變的下拉框id nextid是下一級的id */ function changeRegion(id, nextid) { $("#" + id).change(function() { var parentId = $("#" + id).val(); // alert(a); alert(parentId); searchByParentid(nextid, parentId); }); } showRegion("prov", "city", "county", "town", "village","13","1302","130205","130205002");