jquery를 활용한 select 메뉴 컨트롤 메니저

jquery 를 이용해 SELECT 메뉴를 손쉽게 컨트롤 해보자

좋은 소스를 만들어 주신 분께 먼저 감사합니다.
참 좋은 소스 인데요.

익스7, 8, 9, 오페라, 파이어폭스, 크롬, 사파리 에서 테스트 해 보았습니다.

다 잘 되더군요 역시 익스6은 안되는듯 ...
익스6은 버렸음 좋겠다 얼릉 사라졌음 하는 바램뿐

일단 jQuery 를 기반으로 만들어 졌기 때문에
jquery를 포함하고 있어야 합니다.

말보다 소스를 보시고
소스를 긁어다 테스트 해 보심이 더 빠를겁니다.

@ 자바 스크립트 /==========================================================

< script src="http://code.jquery.com/jquery.min.js" type="text/javascript">

< script type="text/javascript" >
var receiverMan = {
	itemList: null, // select option
	baseOption: {
		itemListSelector : 'select#itemList'
	},
	
	init: function(pOption) {
		this.baseOption = $.extend(this.baseOption, pOption);
		this.itemList = $(this.baseOption.itemListSelector);
	},
	selectedOptions: function() {
	    return this.itemList.find("option:selected");	
	}
	,
	add: function(data) {
		this.itemList.append($("").attr("value", data.value).text(data.text));
	}
	,
    del: function() {
    	// del selected all
    	this.selectedOptions().remove();
    }
	,
    clear: function() {
        // del all items
        this.itemList.find("option").remove();
    }
	,
    up: function() {        
    	var selectedOptions = this.selectedOptions();
    	var prev = $(selectedOptions).first().prev();
    	$(selectedOptions).insertBefore(prev);
    }
	,
    dn: function() {
    	var selectedOptions = this.selectedOptions();
        var next = $(selectedOptions).last().next();
        $(selectedOptions).insertAfter(next);
    }
	,
	selectedOne: function() {
		// return selected first item
		return { 
			value: this.selectedOptions().first().attr("value"),
			text:  this.selectedOptions().first().text()
			}
	}
	,
	selectedAll: function() {
        // return all selected item
		var r  = [];
		this.selectedOptions().each(function(idx, data) {
            r.push({
                value: $(this).attr("value"),
                text: $(this).text()
            });
        });
        return r;
    }
	,
   all: function() {
    	// return all
    	var r  = [];
	this.itemList.find("option").each(function(idx, data) {
    		r.push({
    			value: $(this).attr("value"),
                text: $(this).text()
    		});
    	});
    	return r;
    }
}



$(document).ready(function() {
	$('#receiverAdd').click(function() {
        receiverMan.add({text: 'test:'+(new Date().getTime()), value: '0001'  })
    });
    $('#receiverDel').click(function() {
        receiverMan.del();                
    });
    $('#receiverClear').click(function() {
        receiverMan.clear();                
    });
    $('#receiverUp').click(function() {
    	receiverMan.up();
    });
    $('#receiverDown').click(function() {
    	receiverMan.dn();
    });
    
	receiverMan.init({
		// itemListSelector : "your SELECT selector"
		itemListSelector : "select#itemList"
	});

	$('#itemList').change(function(){
		var args= receiverMan.selectedOne();
		alert(args['value']+' '+args['text']);
	});

	// 자동 등록 레이어 테스트 
	for(var i=0; i<7; i++){
		receiverMan.add({text: 'test:'+(new Date().getTime()), value: '000'+i  })
	}
});
< /script >

@ css /===============================================

< style text="text/css" >
.receiverInputBox {
    width: 500px;
}
.itemList {
    width:300px;
    height:20px;
    font-size:100%;
    color:blue;
    background-color:#ffffff;
    border:0px solid #ffffff;
}
< /style >

@ html /===============================================

< div>
    < div>
        < select name="itemList" id="itemList" class="itemList">
        < a href="#" id="receiverAdd">Add/
        < a href="#" id="receiverDel">Delete/
        < a href="#" id="receiverClear">Clear/
        < a href="#" id="receiverUp">Up/
        < a href="#" id="receiverDown">Down
    < /div>
< /div>