본문 바로가기

jQuery

jQuery - 동적 년도 selectbox 생성


년도 셀렉트박스 자동으로 늘려주는 스크립트 입니다.

기본은 위아래 10년으로 보여지고 option으로 설정가능합니다.






/**
 * selectbox년도를 생성합니다.
 * @param inputID - selectBox Id
 * @param base - 기본년도
 * @param selectedData - selectBox 선택된 값
 * @param options - 옵션 (필수사항 아님)
 */
function yearSelectBoxDynamic(inputID,base,selectedData,options){
    if($("#"+inputID).length <= 0) return;
    
	var defaults = {
		tum : "-10:+10"		//범위
		, all : false		//전체 생성여부
		, dynamic : true	//동적 추가 여부
		, text : "전체"		//기본 text
	};
    
    var option_st = '<option value=';
    var option_en = '</option>';
	
	var settings = $.extend({}, defaults, options);
	
    var min_tum = Number(settings['tum'].split(':')[0] == null ? "0" : settings['tum'].split(':')[0]);
	var plus_tum = Number(settings['tum'].split(':')[1] == null ? "0" : settings['tum'].split(':')[1]);
	
	var resultArray = new Array();
	
	for(var i=Number(base)-1; i>=(Number(base) + min_tum); i--)
	{
		if(i == selectedData)
			resultArray.push(option_st + '"'+i+'" selected="selected">'+i+option_en);
		else
			resultArray.push(option_st + '"'+i+'">'+i+option_en);
		
		if(i == (Number(base) + min_tum) && settings['all'])
		{
			if(selectedData == null || selectedData == '')
				resultArray.push(option_st + '"" selected="selected">'+settings['text']+option_en);
			else
				resultArray.push(option_st + '"">'+settings['text']+option_en);
		}
	}
	
	resultArray.reverse();
	
	if(Number(base) == selectedData)
		resultArray.push(option_st + '"'+base+'" selected="selected">'+base+option_en);
	else
		resultArray.push(option_st + '"'+base+'">'+base+option_en);
	
	
	for(var i=(Number(base)+1); i<=(Number(base) + plus_tum); i++)
	{
		if(i == selectedData)
			resultArray.push(option_st + '"'+i+'" selected="selected">'+i+option_en);
		else
			resultArray.push(option_st + '"'+i+'">'+i+option_en);
	}
	
	$("#"+inputID).html(resultArray.join(''));
	
	if(!settings['all'] && settings['dynamic'])
	{
		var this_idx,this_last,selectedVal,obj;
		$("#"+inputID).change(function (){
			obj = this;
			this_idx = $("option",obj).index($("option:selected",obj));
			this_last = $("option",obj).length - 1;
			selectedVal = Number($("option:selected",obj).val());
			resultArray = new Array();
			
			if(this_idx == 0)
			{
				for(var i=(selectedVal-1); i>=(selectedVal - 10); i--)
				{
					resultArray.push(option_st + '"'+i+'">'+i+option_en);
				}
				
				resultArray.reverse();
				$(obj).prepend(resultArray.join(''));
			}
			else if(this_idx == this_last)
			{
				for(var i=(selectedVal+1); i<=(selectedVal + 10); i++)
				{
					resultArray.push(option_st + '"'+i+'">'+i+option_en);
				}
				$(obj).append(resultArray.join(''));
			}
		});
	}
}


'jQuery' 카테고리의 다른 글

반응형 스파이더웹 (마크쿼리) 메인 타이틀 변경  (0) 2014.08.22