관리 메뉴

심재운 블로그

listbox 의 선택한 값 UP,DOWN 또는 이관 및 삭제 본문

프로그래밍/jQuery

listbox 의 선택한 값 UP,DOWN 또는 이관 및 삭제

재우니 2011.07.25 00:59




<%@ 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 &raquo;</a>

    <a href="JavaScript:void(0);" id="btn-remove">&laquo; 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>



0 Comments
댓글쓰기 폼