본문 바로가기

컴퓨터이야기/JQuery

아이템 추가제거

by 변화지시자 2011. 3. 29.

<TABLE>
  <TR>
  <TD>
  <div class="container">  
    <select name="itemsToChoose" id="left" size="8" multiple="multiple">      
      <option value="1">item1</option>  
      <option value="2">item2</option>  
      <option value="3">item3</option>  
      <option value="4">item4</option>  
      <option value="5">item5</option>  
    </select>  
  </div>  
  </TD>
  <TD>
  <div class="low container">  
    <input name="left2right" value="add" type="button">  
    <input name="right2left" value="remove" type="button">  
  </div>  
  </TD>
  <TD>
  <div class="container">  
    <select name="itemsToAdd" id="right" size="8" multiple="multiple">  
    </select>  
  </div>  
  </TD>
  </TR>
  </TABLE>
 <script src="http://code.jquery.com/jquery-1.5.js"></script> 
<script type="text/javascript">

$(function() {  
  $(".low input[type='button']").click(function(){  
    var arr = $(this).attr("name").split("2");  
    var from = arr[0];  
    var to = arr[1];  
    $("#" + from + " option:selected").each(function(){  
      $("#" + to).append($(this).clone());  
      $(this).remove();  
    });  
  });  
})

</script>

아이템추가제거.html

출처 : www.jquery.com 소스 입니다

저작자표시

티스토리툴바