左侧数据移到右侧 select 实现方法jquery

/ / 2016-01-27 阅读：2492

<!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=...

<!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>

上一篇：jquery slice删除行

下一篇：jquery a.js调用b.js的方法

阅读延展

左侧数据移到右侧 select 实现方法jquery

我要评论

最新评论