`

实现select multiple左右添加和删除功能

阅读更多
项目要实现这样的一个功能(如下图所示):选择左边下拉列表框中的选项,点击添加按钮,把选择的选项移动到右边的下拉列表框中,同样的选择右边的选项,点击删除按钮,即把选择的选项移动到左边的下拉列表框中.相信用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
分享到:
评论

相关推荐

    重构《实现select multiple左右添加和删除功能》

    NULL 博文链接:https://congdepeng.iteye.com/blog/421642

    Jquery实现select multiple左右添加和删除功能的简单实例

    下面小编就为大家带来一篇Jquery实现select multiple左右添加和删除功能的简单实例。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧

    两个多选select(multiple左右)添加、删除选项和取值实例

    主要介绍了两个多选select(multiple左右)添加、删除选项和取值实例,使用jquery实现,需要的朋友可以参考下

    使用jquery实现select添加实现后台权限添加的效果

    呃。其实很简单的东西啦。页面的图 两个列表都可以多选, ...select id=”select1″ size=”5″ multiple style=”width:100px ” &gt; ”111″&gt;北京&lt;/option&gt; ”222″&gt;上海&lt;/option&gt; &lt;option value=”3

    multiple-select-hook:使用Set和Typescript钩住多个选择项

    React Multiple Select Gallery(Hook:hook:) 多张选择的照片(或其他任何照片)会对带有打字稿的钩子示例产生React。 跑 安装依赖项并: &gt; yarn start 用法 const { addItem , getSize , getItems } = ...

    jquery实现select选择框内容左右移动代码分享

    本文实例讲述了select选择框内容左右移动添加删除。分享给大家供大家参考。具体如下: select选择框内容左右移动,简单实用,选中选项内容,点击移动按钮可进行内容左右移动,运行效果图: 具体代码如下 &lt;!...

    jquery操作select常见方法大全【7种情况】

    本文实例讲述了jquery操作select常见方法。分享给大家供大家参考,具体如下: 在前段HTML页面设计中select 下拉框,或者 ...6. 两个select 框之间互相添加删除,从左边到右边,从右边到左边的操作,通常是多选情况。 7

    jQuery实现下拉框左右选择的简单实例

    就是实现这个效果的,选中添加到右边,全部添加到右边,选中删除到左边,全部删除到左边。 html部分: 代码如下:&lt;body&gt; ”centent”&gt; &lt;select multiple=”multiple” id=”select1″ style=”width:100px...

    jQuery UI Multiselect (jQuery UI 多选框)

    jQuery UI Multiselect是一个Web UI控件,它将html multiple select inputs转换成一个更直关、更易于操作的多选控件。支持全选添加和删除操作。

    arcgis工具中英对照总结讲解,推荐文档.pdf

    ArcGIS 是一款功能强大的 GIS 软件,提供了多种工具和功能来处理和分析空间数据。本文档提供了 ArcGIS 工具的中英对照总结讲解,涵盖了 Analysis Tool、Cartography Tool 和 Conversion Tool 等多个方面。 Analysis...

    xheditor-1.1.14

    如果想实现更加复杂的交互应用,或者希望xhEditor编辑器能够和自己的Javascript代码实现互相访问,那么你可以选择使用方法2,相对具有更大的自由空间。 xhEditor也提供了即时的卸载编辑器方法: $('#elm1')....

    web前端学习总结(精华版).pdf

    6. 下拉框:&lt;select id="zky" name="zky" size="12" multiple="multiple"&gt; 北京 &lt;/option&gt; 上海 &lt;/option&gt; 成都 &lt;/option&gt; &lt;/select&gt; 7. 上传文件: 8. 禁用表单元素: 本文档总结了Web前端开发的重要知识点,涵盖...

    jquery-hint:输入提示jquery plguin(支持输入的换行符,textarea)

    ### html只需在类中添加shuttle_select并为您的选择设置multiple即可。 &lt;input type="text" name="input" value="" hint="typing your name." /&gt; &lt;textarea rows="8" cols="40" name="textarea" hint=...

    Sublime Text3_64.rar

    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完全实例.rar

    jQuery 的核心功能都是通过这个函数实现的。 jQuery中的一切都构建于这个函数之上,或者说都是在以某种方式使用这个函数。这个函数最基本的用法就是向它传递一个表达式(通常由 CSS 选择器组成),然后根据这个...

    Radmin自动登录器v3.0

    1、程序功能和使用环境介绍 2、程序操作方法介绍 3、登录信息文件RadminM.txt介绍 4、登录信息文件RadminM.txt的转换和编制 5、v3.0版新增解锁 远程桌面功能 6、相关配置和多种语言支持介绍 7、免责申明 1...

    Radmin自动登录器v3.0-多国语言绿色版-Release1-20150615

    1、程序功能和使用环境介绍 2、程序操作方法介绍 3、登录信息文件RadminM.txt介绍 4、登录信息文件RadminM.txt的转换和编制 5、v3.0版新增解锁远程桌面功能 6、相关配置和多种语言支持介绍 7、免责申明 1...

Global site tag (gtag.js) - Google Analytics