listbox 의 선택한 값 UP,DOWN 또는 이관 및 삭제
Default2.aspx<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default2.aspx.cs" Inherits="Default2" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function () {
$('#btn-add').click(function () {
$('#select-from option:selected').each(function () {
$('#select-to').append("<option value='" + $(this).val() + "'>" + $(this).text() + "</option>");
$(this).remove();
});
});
$('#btn-remove').click(function () {
$('#select-to option:selected').each(function () {
$('#select-from').append("<option value='" + $(this).val() + "'>" + $(this).text() + "</option>");
$(this).remove();
});
});
$('#btn-up').bind('click', function () {
$('#select-to option:selected').each(function () {
var newPos = $('#select-to option').index(this) - 1;
if (newPos > -1) {
$('#select-to option').eq(newPos).before("<option value='" + $(this).val() + "' selected='selected'>" + $(this).text() + "</option>");
$(this).remove();
}
});
});
$('#btn-down').bind('click', function () {
var countOptions = $('#select-to option').size();
$('#select-to option:selected').each(function () {
var newPos = $('#select-to option').index(this) + 1;
if (newPos < countOptions) {
$('#select-to option').eq(newPos).after("<option value='" + $(this).val() + "' selected='selected'>" + $(this).text() + "</option>");
$(this).remove();
}
});
});
$('#test1').bind('click', function () {
var commaSeparated = $('#select-from option').map(function () {
return this.value;
}).get().join(',');
alert(commaSeparated);
});
});
</script>
</head>
<body>
<form id="form1" runat="server">
<fieldset>
<select name="selectfrom" id="select-from" multiple size="5">
<option value="1">Item 1</option>
<option value="2">Item 2</option>
<option value="3">Item 3</option>
<option value="4">Item 4</option>
</select>
<a href="JavaScript:void(0);" id="btn-add">Add »</a>
<a href="JavaScript:void(0);" id="btn-remove">« Remove</a>
<select name="selectto" id="select-to" multiple size="5">
<option value="5">Item 5</option>
<option value="6">Item 6</option>
<option value="7">Item 7</option>
</select>
<a href="JavaScript:void(0);" id="btn-up">Up</a>
<a href="JavaScript:void(0);" id="btn-down">Down</a>
<a href="JavaScript:void(0);" id="test1">test</a>
</fieldset>
</form>
</body>
</html>
'프로그래밍 > jQuery 👍' 카테고리의 다른 글
| jquery : 날짜 형식을 c# 문법과 동일하게 구현하기 (0) | 2012.01.03 |
|---|---|
| jquery ui 의 sortable 로 위아래 이동해보기 (0) | 2011.08.01 |
| setTimeout 활용한 Ajax 비동기 요청, 사용자 이름 유효성 검사하기 (0) | 2011.03.29 |
| jquery select 태그 관련 자료 (0) | 2011.03.24 |
| dropdownlist 에서 다중 선택하기 with jquery (0) | 2011.01.20 |