实现select multiple左右添加和删除功能
来源:互联网 发布:杭州拓风信息科技知乎 编辑:程序博客网 时间:2024/05/10 11:12
项目要实现这样的一个功能(如下图所示):选择左边下拉列表框中的选项,点击添加按钮,把选择的选项移动到右边的下拉列表框中,同样的选择右边的选项,点击删除按钮,即把选择的选项移动到左边的下拉列表框中.相信用js很多朋友都写过,下面是我用jQuery来实现这样的功能的.具体代码如下:
[img]
[/img]
下拉列表
<table width="95%" cellpadding="0" align="center" class="listshow" border="1" 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:150px;">
</select>
</td>
<td align="center" width="5%">
<input type="button" id="add" value="添加>>" />
<br/>
<br/>
<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:150px;">
</select>
</td>
</tr>
</table>
jQuery代码:
/**
*动态的给左边的下拉列表创建选项
*具体情况可以从数据库读取数据动态创建选项
*/
$(document).ready(function(){
for(var i=1;i<=5;i++)
{
$("#fb_list").append("<option value='"+i+"'>公开招标小型机采购00"+i+"</option>");
}
})
$(function(){
$("#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("请选择要添加的分包!");
}
})
})
$(function(){
$("#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("请选择要删除的分包!");
}
})
})
[img]
[/img]
下拉列表
<table width="95%" cellpadding="0" align="center" class="listshow" border="1" 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:150px;">
</select>
</td>
<td align="center" width="5%">
<input type="button" id="add" value="添加>>" />
<br/>
<br/>
<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:150px;">
</select>
</td>
</tr>
</table>
jQuery代码:
/**
*动态的给左边的下拉列表创建选项
*具体情况可以从数据库读取数据动态创建选项
*/
$(document).ready(function(){
for(var i=1;i<=5;i++)
{
$("#fb_list").append("<option value='"+i+"'>公开招标小型机采购00"+i+"</option>");
}
})
$(function(){
$("#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("请选择要添加的分包!");
}
})
})
$(function(){
$("#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("请选择要删除的分包!");
}
})
})
- jQuery学习: 实现select multiple左右添加和删除功能
- 实现select multiple左右添加和删除功能
- Jquery实现select multiple左右添加和删除功能
- 用jQuery实现multiple select(列表框)左右添加和删除功能
- js 两个 multiple select 添加 删除 option
- 左右添加删除SELECT标签的运用
- 左右添加删除SELECT-获得页面值,
- select 多选 左右框添加删除
- 使用EasyUI实现添加和删除功能
- select 左右两个框,双击后添加删除
- select动态添加和删除
- js与select实现左右option的交换删除
- jQuery实现select多选框左右添加,包括双击事件
- 用datagrid 的 Footer实现 添加修改和删除功能
- 使用JQuery实现全选、反选、添加和删除功能
- 添加和删除评论功能网页的实现
- iOS仿探探六宫格相册的实现,带添加和删除功能
- HTML JQuery实现select框删除功能
- IT外企那点儿事
- mysql在线请求复制工具出炉了
- vim下搭建php开发环境
- 小苏有朋遭禁播性感舞曲MV流出,骚男崛起OR妖男现世-色彩型男马宁
- 移动网站开发防止网页触摸滚动
- 实现select multiple左右添加和删除功能
- DTD教程
- SQL Server 2008 R2 各个版本支持的功能
- 论创新工场、职业发展、offer如何比较选择、移动互联网
- java导出oracle表结构
- C#对access数据库压缩
- 海量数据处理利器 STL中哈希表 hash_map(C++)
- JQUERY树型插件ZTREE小例子
- java中如何读取ORACLE中BLOB字段存储的图片