제가 좀 꼼지락거려봤습니다....
작동은 잘 되는것 같구요... 추가 기능도 많이 필요하지만,,, 필수 기능만 만들어 보았습니다.
그럼 즐플 ~
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>jQuery SelectBox Manager Example by Mulder</title>
<script src="http://code.jquery.com/jquery.min.js" type="text/javascript"></script>
<!-- user script s -->
<script type="text/javascript">
//-------------------------------------------
// @title : jquery select manager :)
// @author : mulder
// @blog : http://windowx.tistory.com
// @home : http://www.turbinesoft.com
//-------------------------------------------
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($("<option></option>").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: 'mulder:'+(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"
});
});
</script>
<!-- user script e -->
<style text="text/css">
.receiverInputBox {
width: 500px;
}
.itemList {
width:300px;
height:89px;
font-size:100%;
color:blue;
background-color:#ffffff;
border:0px solid #ffffff;
}
</style>
</head>
<body>
<div>jquery를 이용하여 손쉽게 select box item 을 제어 해 보자 ~</div>
<div>
<div>
<SELECT name="itemList" id="itemList" class="itemList" multiple></SELECT>
<a href="#" id="receiverAdd">Add</a>/
<a href="#" id="receiverDel">Delete</a>/
<a href="#" id="receiverClear">Clear</a>/
<a href="#" id="receiverUp">Up</a>/
<a href="#" id="receiverDown">Down</a>
</div>
</div>
</body>
</html>