熱點推薦:
您现在的位置: 電腦知識網 >> 編程 >> Java編程 >> JSP教程 >> 正文

jquery select多選框的左右移動 具體實現代碼

2013-11-15 12:07:41  來源: JSP教程 
這篇文章介紹了jquery實現select多選框的左右移動的方法有需要的朋友可以參考一下   復制代碼 代碼如下:

  
<!DOCTYPE html PUBLIC "//WC//DTD XHTML Transitional//EN" "
 <html xmlns="
<head>
<meta httpequiv="ContentType" content="text/html; charset=gb" />
<title>無標題文檔</title>
<script type="text/javascript" src="jqueryminjs"></script>
<script type="text/javascript">
/** 
*動態的給左邊的下拉列表創建選項 
*具體情況可以從數據庫讀取數據動態創建選項 
*/
$(document)ready(function(){ 
for(var i=;i<=;i++) 

$("#fb_list")append("<option value="+i+">公開招標小型機采購"+i+"</option>");  

}) 
$(function(){ 
$("#add")click(function(){ 
if($("#fb_list option:selected")length>

$("#fb_list option:selected")each(function(){ 
$("#select_list")append("<option value="+$(this)val()+">"+$(this)text()+"</option"); 
$(this)remove();  
}) 

else

alert("請選擇要添加的分包!"); 

}) 
}) 
$(function(){ 
$("#delete")click(function(){ 
if($("#select_list option:selected")length>

$("#select_list option:selected")each(function(){ 
$("#fb_list")append("<option value="+$(this)val()+">"+$(this)text()+"</option"); 
$(this)remove();  
}) 

else

alert("請選擇要刪除的分包!"); 

}) 
})
</script>
</head>
<body>
<table width="%" cellpadding="" align="center" class="listshow" border="" cellspacing=""> 
<tr> 
<td colspan="" align="center">選擇分包</td> 
</tr> 
<tr> 
<td class="black" width="%" align="center" height=""> 
<select id="fb_list" multiple="multiple" style="textalign:center;width:px;height:px;"></select>  
</td> 
<td align="center" width="%"> 
<input type="button" id="add" value="添加>>" /> 
<br/> 
<br/> 
<input type="button" id="delete" value="<<刪除" /> 
</td> 
<td class="black" width="%" align="center"> 
<select id="select_list" multiple="multiple" style=" textalign:center;width:px;height:px;"></select> 
</td> 
</tr> 
</table>
</body>
</html>


From:http://tw.wingwit.com/Article/program/Java/JSP/201311/20346.html
    推薦文章
    Copyright © 2005-2013 電腦知識網 Computer Knowledge   All rights reserved.