년도 셀렉트박스 자동으로 늘려주는 스크립트 입니다.
기본은 위아래 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 |
---|