mui仿京東地址 css + js （動態資料）

a.html中的regionId為最上層id，可以為4層地區選擇（已經選擇到第4層，則選擇欄消失；如果沒有4層，則選完，選擇欄就消失）；

若需要新增5層選擇，需要注意兩點：

1.新增選擇欄

2.修改寬度大小 .address-cont{width:xx%}

subRegion.css

i,article,aside,details,figcaption,figure,footer,header,hgroup,main,nav,section,summary {display: block}
ul,ul li {list-style-type: none}
a {outline: none;text-decoration: none;color: black}
img {outline: none !important;border: none}
.toogle-address-mask {height: 100%;width: 100%;position: fixed;left: 0;right: 0;bottom: 0;top: 0;background: rgba(0, 0, 0, 0.2);z-index: 99;opacity: 0}
.toogle-address {height: 300px;width: 100%;background: white;position: fixed;z-index: 99;bottom: -300px;left: 0;}
.toogle-address .toogle-address-title {height: 40px;line-height: 40px;font-size: 1.6rem;text-align: center}
.icon-close {height: 25px;width: 25px;display: block;position: absolute;right: 10px;top: 5px;background: white;background-size: 15px 15px;}
.address {width: 100%;position: relative;font-size: 1.4rem;}
.address-header {height: 40px;line-height: 40px;border-bottom: 1px solid #eaeaea;padding: 0 10px;}
.address-header .address-info {font-size: 1.4rem;float: left;padding: 0 5px;}
.address-content {width: 100%;height: 320px;overflow: hidden;}
.address-now {position: relative;}
.address-now::after {position: absolute;content: "";left: 0;bottom: 0;background: #008aff;height: 2px;width: 100%;}
.address-cont {height: 320px;display: flex;display: -webkit-flex;display: -moz-flex;display: -ms-flex;width: 400%;overflow-y: scroll;margin-top: -30px;}
.provienc-part,.city-part,.county-part,.village-part {height: 100%;width: 100%;}
.address-cont ul {padding: 0.5rem 1rem;}
.address-cont ul li {font-size: 1.4rem;padding: 0.5rem 0;}
.liNow {color: #008aff;}

#city,#county,#village {display: none;}

subRegion.js

jQuery.fn.selectAddress = function(options) {
	self.flag = false; // boolean,通過控制true or false, 防止惡意切換
	self.text = null; // 回撥時,用來儲存選擇到的地址資料
	this.default = {
		"ajaxURL": "#",
		"speed": 200, // 切換的速度
		storageBox: "", // 在選擇地址用，用來儲存地址資料的盒子
		callback: function() {}
	}
	var region_id = options.region_id;// 由頁面傳入的預設值
	this.option = $.extend({}, this.default, options);
	var arrText = ""; // 儲存選擇到的資料，新增到storageBox中
	var op = this.option;
	
	
	// 初始化入口
	this.init = function() {
		var self = this;
		this.createEle();
		this.createProvince(region_id);
		self.closeBtn.on("click", function() {
			self.maskHidie();
		})
		self.aInfo.on("click", function() {
			var index = $(this).index();
			self.clickInfo($(this), index);
		});
		self.mask.on("click", function(event) {
			if($(event.target).attr("id") == "toogle-mask") {
				self.maskHidie();
			}
		})
	}
	// 建立toogle-mask模組
	this.createEle = function() {
		var self = this;
		self.mask = $('<div class="toogle-address-mask" id="toogle-mask"></div>');
		self.maskChild = $('<div class="toogle-address" id="toggleCont"><div class="toogle-address-title border-b" style="font-size:15px">請選擇地址<i class="icon-close mui-icon mui-icon-closeempty" id="closeBtn"></i></div><div id="address" class="address"><div class="address-header"><span class="address-info address-now" id="provience" style="font-size:15px">請選擇</span><span class="address-info" id="city" style="font-size:15px">請選擇</span><span class="address-info" id="county" style="font-size:15px">請選擇</span><span class="address-info" id="village" style="font-size:15px">請選擇</span></div><div class="address-content"><div class="address-cont"><ul class="provienc-part" data-create="createCity" data-index="1"></ul><ul class="city-part" data-create="createCounty" data-index="2"></ul><ul class="county-part" data-create="createVillage" data-index="3"></ul><ul class="village-part" data-index="4"></ul></div></div></div></div>');
		$("body").append(self.mask);
		self.mask.append(self.maskChild);
		self.closeBtn = $("#closeBtn", self.mask); // 關閉按鈕
		self.toogleMask = $("#toggleCont", self.mask); 
		self.aInfo = $(".address-info", self.mask); 
		self.AddressCont = $(".address-cont", self.mask); 
		self.mask.animate({
			opacity: 1
		}, 100, function() {
		self.maskChild.animate({
			"left": "0",
			"bottom": "0"
			}, op.speed);
		})
	}
	// 建立省模組
	this.createProvince = function(region_id) {
		var self = this;
		self.addressAjax(self.AddressCont.find('.provienc-part'), region_id);
	}
	// 建立市模組
	this.createCity = function(dataValue) {
		var self = this;
		self.mask.find("#city").show();
		self.AddressCont.find('.city-part').empty();
		self.addressAjax(self.AddressCont.find('.city-part'), dataValue);
	}
	// 建立區域模組
	this.createCounty = function(dataValue) {
		var self = this;
		self.mask.find("#county").show();
		self.AddressCont.find('.county-part').empty();
		self.addressAjax(self.AddressCont.find('.county-part'), dataValue);
	}
	// 建立鄉模組
	this.createVillage = function(dataValue) {
		var self = this;
		self.mask.find("#village").show();
		self.AddressCont.find('.village-part').empty();
		self.addressAjax(self.AddressCont.find('.village-part'), dataValue);
	}
	// 點選選擇地址
	this.clickfn = function(district) {
		var self = this;
		district.on('click', function(event) {
			var _this = $(this);
			var parent = _this.parent();
			var dataValue = _this.data("value");
			var parentCreate = parent.data("create");
			var dataIndex = parent.data("index");
			_this.parent().find('li').removeClass("liNow");
			_this.addClass("liNow");
			if(parentCreate == 'createCity') {
				self.createCity(dataValue);
			} else if(parentCreate == "createCounty") {
				self.createCounty(dataValue);
			} else if(parentCreate == "createVillage") {
				self.createVillage(dataValue);
			}
			if(dataIndex == 4) {
				// 如果dataIndex=4,說明選擇的是鄉，執行移除toogle-address模組
				self.maskHidie();
			} else {
				// 如果dataIndex小於4，執行clickInfo
				self.clickInfo(self.aInfo.eq(dataIndex), dataIndex);
			}
		})
	}
	// 移除toogle-address模組
	this.maskHidie = function() {
		var self = this;
		self.toogleMask.animate({
			bottom: "-300px"
		}, op.speed, function() {
			self.mask.animate({
				'opacity': 0
			}, 200, function() {
				self.addressInput();
				if(op.callback && typeof op.callback == "function") {
					// 執行回撥函式
					op.callback(self.text +"_"+self.regionId);
				}
			})
		})
	}
	// 將資料存放到input表單中
	this.addressInput = function() {
		var self = this;
		var boxHtml = "";
		var text = "";
		var regionId = "";
		for(var i = 0; i < op.storageBox.find("span").length; i++) {
			boxHtml += op.storageBox.find("span").eq(i).text() + " ";
		}
		for(var i = 0; i < $(".liNow").length; i++) {
			arrText += "<span>" + $(".liNow").eq(i).text() + "</span>";
			text += $(".liNow").eq(i).text() + " ";
			var list = JSON.stringify($(".liNow").eq(i));
			regionId += list.split("value")[1].split("}")[0].split(":")[1] +" ";  // 我返回的值有地區名字和地區id
		};
		// 如果arrText不為空
		if(arrText != "") {
			op.storageBox.html(arrText);
			self.text = text;
			self.regionId = regionId;
		} else {
			self.text = boxHtml;
		}
		self.mask.remove();
	}
	this.clickInfo = function(ele, index) {
		var self = this;
		self.flag = true;
		if(self.flag) {
			self.flag = false;
			ele.addClass("address-now").siblings().removeClass("address-now");
			self.AddressCont.animate({
				"margin-left": "-" + index * 100 + "%"
			}, op.speed);
			self.flag = true;
		}
	}
	// 通過ajax請求資料
	this.addressAjax = function(district, cValue) {
		var self = this;
		var oType = null;
		
		district.empty();
		// 我的請求地址	
		var requestUrl = app.getCacheItem(constants.cache_url_base) + constants.url_region_getSubRegions; 
		app.getJsonWithToken(requestUrl, {
			parentRegionId: cValue // 地區的父類id
		}, function(data) {
		if(data.message == 'success') {
			district.empty();
			this.countyItem = '';
			oType = data.data;
			$.each(oType, function(key, value) {
				this.countyItem = $("<li data-value='" + value.id + "'><label style='font-size:15px'>"+value.regionName + "</label></li>");
				district.append(this.countyItem);
			});
				self.clickfn(district.find("li"));
			} else {
				self.maskHidie();
			}
		});
	}
	return this.init();
};

 

a.html

<buttion type="button" id="area">地區</button>

$("#area").on("click", function() {
    $("#area").selectAddress({
        "ajaxURL":"",
        storageBox:$("#area"),
        region_id : 1,//第一個父類id
        callback:function(string){//執行回撥
            document.getElementById('area').value = stringName;
        }
    });
});