/******************************  调用方式  ******************************
$(function(){
	$("#example").dynamicDropdown({
		grade : 5,
		emptyStyle: ["--- 请选择省份 ---", "--- 请选择城市 ---", "--- 请选择县（区） ---", "--- 请选择乡（镇） ---", "--- 请选择村 ---"],
		jsonUrl:"area.json",
		jsonKey:["province", "city", "county", "town", "village"],
		//defaultValue: {"province":"13", "city":"1305", "county":"130523", "town":"130523101", "village":"130523101202"},
	});
});
******************************  调用方式  *******************************/


/**
 * 	grade: 下拉联动级数
 *  emptyStyle: 没有选择结果时默认显示样式
 *  jsonUrl: 多级联动的数据JSON数据源
 *  jsonKey：多级联动中JSON数据中每级数据对应的key
 *  defaultValue：默认值
 */
$.fn.dynamicDropdown = function(params){
	var grade = params.grade;
	var emptyStyle = params.emptyStyle;
	var jsonUrl = params.jsonUrl;
	var jsonKey = params.jsonKey;
	var defaultValue = params.defaultValue;
	
	$(this).createSelectByGrade(grade);
	if(emptyStyle != null){
		$(this).setEmptyOptionStyleToSelect(emptyStyle);
	}
	if(defaultValue != null){
		$(this).children(".dynamicDropdown").setDefaultValueToSelect(jsonUrl, jsonKey, defaultValue);
	}else{
		$(this).initDynamicOptionToSelect(jsonUrl, jsonKey);
	}

	$(".dynamicDropdown").bind('change', function(){
		$(this).addDynamicOptionToSelect(jsonUrl, jsonKey, emptyStyle);
	})
	
}


//指定联动级数动态生成下拉选择框
$.fn.createSelectByGrade = function(grade){
	if(grade > 0){
		var template = "";
		for(var i = 0; i < grade; i++){
			template += '<select class="form-control dynamicDropdown" id="level'+ i +'" name=""></select>'
		}
		$(this).append(template);
	}
}


//设置没有选择结果时默认显示样式
$.fn.setEmptyOptionStyleToSelect = function(array){
	for(var i = 0; i < array.length; i++){
		$(this).children("#level" + i).append('<option value="">'+ array[i] +'</option>');
	}
}


//初始化一级下拉选择框中的内容
$.fn.initDynamicOptionToSelect = function(jsonUrl, jsonKey){
	var currentElement = $(this).children(":first")
	$.getJSON(jsonUrl, function(jsonMap){
		var key = jsonKey[0];
		var jsonValue = jsonMap[key];
		
		$(currentElement).attr("name", key);
		for(var i = 0; i < jsonValue.length; i++){
			var data = jsonValue[i];
			$(currentElement).append('<option value="'+ data.code +'">'+ data.name +'</option>');
		}
	});
}


//动态添加下拉框中的内容
$.fn.addDynamicOptionToSelect = function(jsonUrl, jsonKey, emptyStyle){
	if($(this).next().length > 0){
		//移出所有非标题元素的值
		if(emptyStyle != null){
			$(this).nextAll().each(function(el){
				$(this).children(":not(:first)").remove();
			});
		}else{
			$(this).nextAll().each(function(el){
				$(this).children().remove();
			});
		}
		if($(this).val() == "" || $(this).val() == null){
			return false;
		}		
		
		//插入下一级元素内容
		if($(this).nextAll().length > 0){
			var currentElement = $(this);
			var parentVal = $(currentElement).val();
			var nextIndex = $(currentElement).prevAll().length + 1;
			var key = jsonKey[nextIndex];
			
			$(currentElement).next().attr("name", key);
			$.getJSON(jsonUrl, function(jsonMap){
				var jsonValue = jsonMap[key];
				for(var i = 0; i < jsonValue.length; i++){
					var data = jsonValue[i];
					if(data.code.startsWith(parentVal)){
						$(currentElement).next().append('<option value="'+ data.code +'">'+ data.name +'</option>');
					}
				}
				//没有子元素时隐藏节点后所有兄弟节点
				if(emptyStyle != null){
					if($(currentElement).next().children().length == 1){
						$(currentElement).nextAll().hide();
					}else{
						$(currentElement).nextAll().show();
					}
				}else{
					if($(currentElement).next().children().length == 0){
						$(currentElement).nextAll().hide();
					}else{
						$(currentElement).nextAll().show();
					}
				}
			});
		}
	}
}	


//设置多级联动的默认值
$.fn.setDefaultValueToSelect = function(jsonUrl, jsonKey, defaultValue){
	$(this).each(function(i){
		var currentElement = $(this);
		var key = jsonKey[i];
		
		$(currentElement).attr("name", key);
		$.getJSON(jsonUrl, function(jsonMap){
			var jsonValue = jsonMap[key];
			var defaultVal = defaultValue[key];
			if($(currentElement).prevAll().length > 0){
				var parentVal = $(currentElement).prev().val();
				for(var i = 0; i < jsonValue.length; i++){
					var data = jsonValue[i];
					if(data.code.startsWith(parentVal)){
						$(currentElement).append('<option value="'+ data.code +'">'+ data.name +'</option>');
					}
				}
				$(currentElement).val(defaultVal);
			}else{
				for(var i = 0; i < jsonValue.length; i++){
					var data = jsonValue[i];
					$(currentElement).append('<option value="'+ data.code +'">'+ data.name +'</option>');
				}
				$(currentElement).val(defaultVal);
			}
		});
	});
}