`

实现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左右添加和删除功能》

    在这个特定的案例中,“重构《实现select multiple左右添加和删除功能》”是一个关于如何优化多选下拉框(select multiple)操作的实践。该博文的作者通过提供一个名为`multipleSelect.html`的示例文件,展示了如何...

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

    项目要实现这样的一个功能(如下图所示):选择左边下拉列表框中的选项,点击添加按钮,把选择的选项移动到右边的下拉列表框中,同样的选择右边的选项,点击删除按钮,即把选择的选项移动到左边的下拉列表框中.相信用js很多...

    layui多选下拉框样式,整套layui-select-multiple

    "layui-select-multiple"就是Layui专门为多选下拉框设计的一整套样式和功能。 首先,我们来看“layui多选下拉框样式”这一知识点。Layui的多选下拉框在视觉上非常整洁,其设计遵循了扁平化和简洁化的理念,与现代...

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

    总结来说,这个实例展示了如何使用jQuery来实现两个多选`select`元素之间的选项添加、删除以及值的传递。它利用了`select`元素的`multiple`属性、`input`元素的`hidden`类型,以及jQuery的事件监听和DOM操作功能,...

    解决element-ui里的下拉多选框 el-select 时,默认值不可删除问题

    虽然这种方法能够实现功能,但在界面上会存在误导用户的情况,因为在不允许删除的tag上仍会显示“x”图标,这可能会让用户误认为可以删除。 2. 使用CSS样式隐藏关闭按钮 利用CSS的定位技术定位到tag中的关闭按钮...

    Element-ui中 选择器(select)多选下拉框实现全选功能.zip

    为了实现全选功能,我们需要添加一个额外的选项,其值可以是一个特殊值,表示“全选”。同时,我们需要监听`@change`事件,当选择或取消“全选”时,更新所有其他选项的状态。这可以通过遍历`options`数组并改变每个...

    Select Multiple Values from Combobox Using JavaScript.zip

    在网页中,这种功能通常通过HTML的`&lt;select&gt;`元素配合`multiple`属性来实现,然后用JavaScript进行操作和控制。 首先,HTML的`&lt;select&gt;`标签用于创建下拉列表,添加`multiple`属性则允许用户选择多个选项。例如: ...

    JQuery实现select互换数据和上下移动

    本文将深入探讨如何使用jQuery实现一个类似Struts2中的`optiontransferselect`标签的功能,即在两个下拉框之间进行选项的互选和上下移动。 首先,我们需要了解`optiontransferselect`的基本概念。在Struts2框架中,...

    HTML Select 下拉菜单功能扩展

    - **Select2**:提供搜索、分页、多选和自定义模板等功能,可实现高度可定制的下拉菜单。 - **Chosen**:简化了多选和搜索功能,使下拉菜单看起来更简洁。 6. **事件处理**:利用JavaScript事件监听器,可以响应...

    下拉框多选select多选

    在网页设计和开发中,"下拉框多选select多选"是一个常见的功能,它允许用户在下拉菜单中选择多个选项,而不仅仅是一个。在HTML中,`&lt;select&gt;`元素通常用于创建这样的下拉菜单,但默认情况下,`&lt;select&gt;`只支持单选。...

    Jquery实现的双Select框多选表单提交

    在本文中,我们将深入探讨如何使用jQuery库来实现一个功能丰富的双Select框多选表单,以便用户可以方便地在两个下拉列表之间选择和移动选项,并在提交表单时发送选定的数据。jQuery是一个强大的JavaScript库,它简化...

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

    在本文中,我们将深入探讨如何使用jQuery来实现一个基本的后台权限管理功能,特别是涉及到`select`元素的添加和删除操作。这个功能允许用户通过双击或者点击按钮在两个多选列表之间移动选项,模拟权限分配的过程。 ...

    js之Select用法

    在现代Web开发中,经常使用数据绑定框架(如React、Vue或Angular)将`select`元素与应用程序的状态关联起来,以实现动态更新和双向数据绑定。 9. **响应式设计** 在移动设备上,`select`元素可能会显示为一个可...

    多选select组件 涉及的所有常用操作

    本篇文章将探讨“多选select组件涉及的所有常用操作”,并结合提供的`mulSelectOperator.js`文件,来深入理解其背后的实现原理和常见操作。 1. **基本结构** 多选select组件在HTML中的基本结构是`&lt;select&gt;`标签,...

    jQuery实现Select左右复制移动内容

    在本文中,我们将深入探讨如何使用jQuery来实现Select元素之间的内容复制和移动功能。这个功能在许多用户界面中都有应用,比如多选设置、数据过滤等。以下是对给定代码的详细解释和扩展: 首先,我们需要引入jQuery...

    jquery 实现下拉框左右选择

    本文将深入探讨如何使用jQuery实现一个下拉框左右选择的功能,这是一个常见于用户界面设计中的交互元素,通常用于选项筛选或数据迁移。 首先,我们需要理解下拉框左右选择的基本概念。这种设计通常包含两个部分:...

    Js操作Select大全(取值、设置选中等等)

    通过上述详细介绍,我们可以看到利用JavaScript和jQuery操作`&lt;select&gt;`元素十分灵活且功能强大。这些技术不仅适用于简单的表单处理,还能够支持复杂的动态数据绑定和用户交互设计。希望本篇文档能帮助您更好地理解和...

Global site tag (gtag.js) - Google Analytics