左側數據移到右側 select 實現法

<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>無標題文檔</title>
<script src="http://s1.56img.com/script/lib/jquery/jquery-1.4.4.min.js" type="text/javascript"></script>
</head>

<body>
<table width="100%" cellpadding="0" align="center" class="listshow" border="0" cellspacing="0">
    <tr>
      <td colspan="4" align="center">班次</td>
    </tr>
 <tr>
        <td class="black" width="30%" align="center" height="150">
            <select id="fb_list" multiple="multiple" style="text-align:center;width:300px;height:200px;"></select> 
        </td>
  <td align="center" width="5%">
   <input type="button" id="add" value="添加>>" />
   <input type="button" id="delete" value="<<刪除" />
  </td>
  <td class="black" width="30%" align="center">
   <select id="select_list" multiple="multiple" style=" text-align:center;width:300px;height:200px;"></select>
  </td>
</tr>
</table>

<script>
$(document).ready(function(){
 for(var i=1;i<=5;i++) {
  $("#fb_list").append("<option value='"+i+"'>班次00"+i+"</option>"); 
 };
 
  $("#add").click(function(){
  if($("#fb_list option:selected").length>0) {
   $("#fb_list option:selected").each(function(){
    $("#select_list").append("<option value='"+$(this).val()+"'>"+$(this).text()+"</option");
    $(this).remove(); 
   })
  }else {
   alert("請選擇要添加的班次!");
  }
 });
 
 $("#delete").click(function() {
   if($("#select_list option:selected").length>0) {
    $("#select_list option:selected").each(function(){
     $("#fb_list").append("<option value='"+$(this).val()+"'>"+$(this).text()+"</option");
      $(this).remove(); 
    })
   }else {
    alert("請選擇要刪除的班次!");
   }
 })
})
</script>
</body>
</html>

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章