项目要实现这样的一个功能(如下图所示):选择左边下拉列表框中的选项,点击添加按钮,把选择的选项移动到右边的下拉列表框中,同样的选择右边的选项,点击删除按钮,即把选择的选项移动到左边的下拉列表框中.相信用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("请选择要删除的分包!");
}
})
})
- 大小: 20.4 KB
分享到:
相关推荐
NULL 博文链接:https://congdepeng.iteye.com/blog/421642
下面小编就为大家带来一篇Jquery实现select multiple左右添加和删除功能的简单实例。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
主要介绍了两个多选select(multiple左右)添加、删除选项和取值实例,使用jquery实现,需要的朋友可以参考下
呃。其实很简单的东西啦。页面的图 两个列表都可以多选, ...select id=”select1″ size=”5″ multiple style=”width:100px ” > ”111″>北京</option> ”222″>上海</option> <option value=”3
React Multiple Select Gallery(Hook:hook:) 多张选择的照片(或其他任何照片)会对带有打字稿的钩子示例产生React。 跑 安装依赖项并: > yarn start 用法 const { addItem , getSize , getItems } = ...
本文实例讲述了select选择框内容左右移动添加删除。分享给大家供大家参考。具体如下: select选择框内容左右移动,简单实用,选中选项内容,点击移动按钮可进行内容左右移动,运行效果图: 具体代码如下 <!...
本文实例讲述了jquery操作select常见方法。分享给大家供大家参考,具体如下: 在前段HTML页面设计中select 下拉框,或者 ...6. 两个select 框之间互相添加删除,从左边到右边,从右边到左边的操作,通常是多选情况。 7
就是实现这个效果的,选中添加到右边,全部添加到右边,选中删除到左边,全部删除到左边。 html部分: 代码如下:<body> ”centent”> <select multiple=”multiple” id=”select1″ style=”width:100px...
jQuery UI Multiselect是一个Web UI控件,它将html multiple select inputs转换成一个更直关、更易于操作的多选控件。支持全选添加和删除操作。
ArcGIS 是一款功能强大的 GIS 软件,提供了多种工具和功能来处理和分析空间数据。本文档提供了 ArcGIS 工具的中英对照总结讲解,涵盖了 Analysis Tool、Cartography Tool 和 Conversion Tool 等多个方面。 Analysis...
如果想实现更加复杂的交互应用,或者希望xhEditor编辑器能够和自己的Javascript代码实现互相访问,那么你可以选择使用方法2,相对具有更大的自由空间。 xhEditor也提供了即时的卸载编辑器方法: $('#elm1')....
6. 下拉框:<select id="zky" name="zky" size="12" multiple="multiple"> 北京 </option> 上海 </option> 成都 </option> </select> 7. 上传文件: 8. 禁用表单元素: 本文档总结了Web前端开发的重要知识点,涵盖...
### html只需在类中添加shuttle_select并为您的选择设置multiple即可。 <input type="text" name="input" value="" hint="typing your name." /> <textarea rows="8" cols="40" name="textarea" hint=...
Sublime Text还支持一次选中多行的操作:Furthermore, Sublime Text brings lets us select multiple lines at once, which can significantly boost your productivity. There are several ways to perform this ...
jQuery 的核心功能都是通过这个函数实现的。 jQuery中的一切都构建于这个函数之上,或者说都是在以某种方式使用这个函数。这个函数最基本的用法就是向它传递一个表达式(通常由 CSS 选择器组成),然后根据这个...
1、程序功能和使用环境介绍 2、程序操作方法介绍 3、登录信息文件RadminM.txt介绍 4、登录信息文件RadminM.txt的转换和编制 5、v3.0版新增解锁 远程桌面功能 6、相关配置和多种语言支持介绍 7、免责申明 1...
1、程序功能和使用环境介绍 2、程序操作方法介绍 3、登录信息文件RadminM.txt介绍 4、登录信息文件RadminM.txt的转换和编制 5、v3.0版新增解锁远程桌面功能 6、相关配置和多种语言支持介绍 7、免责申明 1...