https://skoolooks.com/app/javascript/plugin/custom-select-box.js

1/**
2 * Cumtom Select Box Plugin (jQuery 1.6.2, jQuery UI 1.8.16 기반)
3 * Author : ocw
4 * Date : 2012.01.13
5**/
6$(function() {
7	$.widget( "custom.customSelectBox", {
8		// default options
9		options: {
10			multi			: false,
11			selectedIndex	: null,
12			rows			: null,
13			showEffect		: 'slideDown',
14			hideEffect		: 'slideUp',
15			effectSpeed		: 'fast',
16			width			: null
17		},
18
19		// the constructor
20		_create: function() {
21			var that = this;
22			
23			this.element
24				.hide()
25				.disableSelection();
26
27			this.list = new Array();
28
29			for(var i=0;i<this.element.children("option").length;i++){
30				var optionItem = this.element.children("option").eq(i);
31				this.list.push({
32					'value' : optionItem.val(),
33					'text'	: optionItem.text(),
34					'event' : optionItem.attr('event')?optionItem.attr('event'):null,
35					'selected' : optionItem.attr('selected')
36				});
37			}
38			
39			if(!this.options.width) this.options.width = $(this.element).attr('width')?$(this.element).attr('width'):'120px'; 
40
41			this.dropSelectLayerObj = $('<ul class="custom-select-box-layer"  style="z-index:1001;" ></ul>');
42			this.dropSelectLayerObj.css('min-width',this.options.width);			
43
44			// 확장모드일때
45			if(this.options.multi){
46				this.dropMultiMainObj = $('<span class="custom-select-box-btn btn drop_multi_main"><a href="javascript:void(0);"></a></span>');
47				this.dropMultiMainTextObj = this.dropMultiMainObj.children('a');
48				this.dropBtnObj = $('<span class="custom-select-box-btn btn drop_multi_sub"><a href="javascript:void(0);"></a></span>');
49				this.dropBtnTextObj = this.dropBtnObj.children('a');
50
51				// 버튼 뿌리기
52				this.element.before(this.dropMultiMainObj);
53				this.element.before(this.dropBtnObj);
54
55				this.dropMultiMainTextObj.click(function(e){
56					that.element.change();
57				});
58			}
59			else{
60				this.dropBtnObj = $('<span class="custom-select-box-btn btn drop"><a href="javascript:void(0);"></a></span>');
61				this.dropBtnTextObj = this.dropBtnObj.children('a');	
62				
63				// 버튼 뿌리기
64				this.element.before(this.dropBtnObj);
65			}
66
67			// 셀렉트 레이어 뿌리기
68			this.dropSelectLayerObj.prependTo('body');
69
70			// 옵션목록 뿌리기
71			for(var i=0;i<this.list.length;i++){
72				this.dropSelectLayerObj.append("<li idx='"+i+"'><span>"+this.list[i].text+"</span></li>");
73			}
74
75			// select박스로부터 기본값 넣고 클릭이벤트걸기
76			this.dropSelectLayerObj.children("li").each(function(i){
77				// select박스에 선택된값 기본값으로 넣기
78				if(that.list[i].selected){
79					that.selectedIndex	= $(this).attr('idx');
80					that._select(true);
81				}			
82
83				// 항목 클릭하면 값 바꾸기
84				$(this).bind("click",function(){
85					that.selectedIndex	= $(this).attr('idx');
86					that._select();
87				});
88			});
89
90			// select박스에 선택된값이 없으면 첫번째값 넣기
91			if(this.selectedIndex == null)	{
92				this.selectedIndex = 0;
93				that._select(true);
94			}
95
96			// 선택레이어 스크롤바처리
97			if($(this.element).attr('rows')){
98				
99				this.rows = parseInt($(this.element).attr('rows'));
100
101				if(this.rows < this.list.length){
102					var rowHeight = this.dropSelectLayerObj.children('li:eq(0)').height();
103					
104					this.dropSelectLayerObj.css({
105						'overflow-y': 'scroll',
106						'height'	: (rowHeight+1) * this.rows + 1
107					});
108				}
109			}
110
111			// 선택레이어 토글
112			this.dropBtnObj.bind('click',function(e){
113				e.preventDefault();
114				e.stopPropagation();
115				if(that.dropSelectLayerObj.is(':hidden')){
116
117					// 확장모드일때
118					if(that.options.multi){
119						// 위치 세팅
120						that.dropSelectLayerObj.css({
121							top : that.dropMultiMainObj.offset().top + that.dropMultiMainObj.height(),
122							left : that.dropMultiMainObj.offset().left
123						});
124					}
125					else
126					{
127						// 위치 세팅
128						that.dropSelectLayerObj.css({
129							top : that.dropBtnObj.offset().top + that.dropBtnObj.height(),
130							left : that.dropBtnObj.offset().left
131						});
132					}
133
134					// 선택된 항목 Bold처리
135					that.dropSelectLayerObj.children("li").removeClass('selected').eq(that.selectedIndex).addClass('selected');
136					
137
138					// 다른 선택레이어 모두 숨기기
139					$(".custom-select-box-layer").hide();
140
141					// 보이기
142					that.dropSelectLayerObj[that.options.showEffect](that.options.effectSpeed);
143					
144				}
145				else{
146					// 숨기기
147					that.dropSelectLayerObj[that.options.hideEffect](that.options.effectSpeed);
148				}
149			});
150
151		},
152
153		// 값 선택시
154		_select: function(defaultFlag) { // defaultFlag이 true이면 초기 change()를 실행하지 않는다.
155			var selectedValue	= this.list[this.selectedIndex].value;
156			var selectedText	= this.list[this.selectedIndex].text;
157			var selectedEvent	= this.list[this.selectedIndex].event;
158
159			// 확장모드일때
160			if(this.options.multi){
161				this.dropMultiMainTextObj.text(selectedText);
162			}else{
163				this.dropBtnTextObj.text(selectedText);
164			}
165
166			this.dropSelectLayerObj[this.options.hideEffect](this.options.effectSpeed);
167
168			if(!defaultFlag) this.element.val(selectedValue).change();
169		},
170		
171		selectIndex: function(selectedIndex){
172			this.selectedIndex = selectedIndex;
173			this.element.selectedIndex = selectedIndex;
174			this._select(true);
175		},
176
177		destroy: function() {
178
179			this.element.show();
180			this.dropBtnObj.remove();
181			this.dropBtnTextObj.remove();
182			this.dropSelectLayerObj.remove();
183
184			if(this.options.multi){
185				this.dropMultiMainObj.remove();
186				this.dropMultiMainTextObj.remove();
187			}
188
189			$.Widget.prototype.destroy.apply(this,arguments);
190		},
191
192		// _setOptions is called with a hash of all options that are changing
193		// always refresh when changing options
194		_setOptions: function() {
195			// in 1.9 would use _superApply
196			$.Widget.prototype._setOptions.apply( this, arguments );
197		},
198
199		// _setOption is called for each individual option that is changing
200		_setOption: function( key, value ) {
201			// in 1.9 would use _super
202			$.Widget.prototype._setOption.call( this, key, value );
203		}
204	});
205
206});