`

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

jQueryJavaScriptHTMLBlog 
阅读更多

很久很久以前，我刚听说过JQuery，然后在不知道javaeye还是blogjava上看到一篇《实现select multiple左右添加和删除功能》的文章，写的很黄很暴力，我一紧张就打印下来了，昨天晚上拉肚子上厕所，突然找出打印稿，在厕所上看了一下，发现不错。这个文章的原作者我已经不知道是谁了，但是我要感谢他的奉献精神。

 

为了表示对他的尊敬，我修改了他的代码，为了更通用。代码例子任然沿用原作者的风格。希望大家喜欢。

 

 

源代码附件也有

原文实现select multiple左右添加和删除功能》转载：http://winhonourxzg.iteye.com/blog/342987 

 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <title>jquery life</title>

    <script type="text/javascript" src="jquery1.3.2.js"></script>

    <!--下面这个script元素里面包含的代码您再修改一下，可以做为公用的放到您的项目的common.js里面。-->
    <script type="text/javascript">
          /* initCandidateList： 根据参数初始化候选列表里面的元素*/
        function initCandidateList(candidateListId, listLength, preText) {
            for (var i = 1; i <= listLength; i++)
            {
                $("#" + candidateListId).append("<option value='" + i + "'>" + preText + i + "</option>");
            }
        }

        /*attachAddButtonEvent：给add按钮添加事件*/
         function attachAddButtonEvent(addButtonId, candidateListId, selectedListId, msg) {
            $(function() {
                $("#" + addButtonId).click(function() {
                    if ($("#" + candidateListId + " option:selected").length > 0)
                    {
                        $("#" + candidateListId + " option:selected").each(function() {
                            $("#" + selectedListId).append("<option value='" + $(this).val() + "'>" + $(this).text() + "</option");
                            $(this).remove();
                        })
                    }
                    else
                    {
                        alert(msg);
                    }
                })
            })
        }
        /*attachDeleteButtonEvent：给delet按钮添加事件*/
        function attachDeleteButtonEvent(deleteButtonId, candidateListId, selectedListId, msg) {
            $(function() {
                $("#" + deleteButtonId).click(function() {
                    if ($("#" + selectedListId + " option:selected").length > 0)
                    {
                        $("#" + selectedListId + " option:selected").each(function() {
                            $("#" + candidateListId).append("<option value='" + $(this).val() + "'>" + $(this).text() + "</option");
                            $(this).remove();
                        })
                    }
                    else
                    {
                        alert(msg);
                    }
                })
            })
        }
    </script>

   <!--下面这个script元素里面包含的代码只针对这个页面的功能，就放在这个页面好了。-->
    <script type="text/javascript">
        $(document).ready(function() {
            //first multiple select
            initCandidateList('candidate_list', 5, '公开招标小型机采购00');
            attachAddButtonEvent('add', 'candidate_list', "select_list", '请选择要添加的分包!');
            attachDeleteButtonEvent('delete', 'candidate_list', "select_list", "请选择要删除的分包");

            //second multiple select
            initCandidateList('candidate_list2', 6, '非公开招标大型机采购');
            attachAddButtonEvent('add2', 'candidate_list2', "select_list2", '请选择要添加的分包!');
            attachDeleteButtonEvent('delete2', 'candidate_list2', "select_list2", "请选择要删除的分包");
        })
    </script>

</head>
<body>
<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="candidate_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>
<br>
<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="candidate_list2" multiple="multiple" style="text-align:center;width:300px;height:150px;">

            </select>
        </td>
        <td align="center" width="5%">
            <input type="button" id="add2" value="添加>>"/>
            <br/>
            <br/>
            <input type="button" id="delete2" value="<<删除"/>
        </td>
        <td class="black" width="30%" align="center">
            <select id="select_list2" multiple="multiple" style=" text-align:center;width:300px;height:150px;">

            </select>
        </td>
    </tr>
</table>


</body>
</html>

 

0
顶
1
踩
分享到：
| 认证（authentication）和授权（authorizat ...
评论
1 楼 lffsonic 2010-11-05  
如果出现重复的怎么处理？
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    element ui select多选组件 重构

    总的来说，Element UI 的 `select` 多选组件重构是一个涉及组件功能增强、样式定制、性能优化和用户体验提升的过程。通过合理的设计和编码实践，我们可以将这个组件打造得更加符合业务需求和用户期望。

    大规模MIMO检测算法VLSI架构-专用电路及动态重构实现.pdf

    MIMO（Multiple-Input Multiple-Output）技术是现代无线通信系统中的关键组成部分，尤其在5G和未来的6G网络中扮演着至关重要的角色。大规模MIMO系统通过利用多个天线同时传输和接收信号，显著提升了频谱效率和通信...

    ZYNQ 实现PL动态重构

    本文将深入探讨如何利用ZYNQ实现PL动态重构这一关键技术，旨在提升系统的灵活性和效率。 动态重构是指在系统运行过程中，根据需求变化对硬件结构进行重新配置，从而实现不同功能或者优化性能。在ZYNQ平台上，这种...

    Matlab重构算法_matlab_matlab压缩感知重构算法程序实现_压缩感知_

    总之，Matlab作为强大的数值计算工具，为研究和实现压缩感知提供了便利。通过深入理解压缩感知的理论基础和Matlab的实现细节，我们可以有效地重构信号，提高数据处理的效率和质量。在实际项目中，还需要结合具体应用...

    Eclipse中自动重构实现探索

    Eclipse提供了撤销和重做功能，这在进行重构时非常有用，因为我们可以快速回退到重构前的状态，或者恢复到之前的某个中间状态。此外，Eclipse还支持内联（Inline）操作，用于消除冗余的中间函数调用，以及改变方法...

    可重构算法设计及实现

    在这一背景下，可重构算法设计及实现应运而生，它旨在通过硬件和软件的融合，实现算法的动态调整和优化，从而在不同的应用场景中保持高性能。本文将深入探讨以keccak算法为基础，设计出的一种高性能可重构算法硬件...

    基于FPGA可重构多功能仪器方案设计.pdf

    FPGA是一种可以通过编程来配置的集成电路，它允许设计者在不更换硬件的情况下，通过修改固件来改变硬件的逻辑功能和互连。这样的技术对于需要频繁修改或升级功能的测试设备尤其有价值。 从文档提供的内容来看，FPGA...

    重构mvc实现struts框架

    **标题解析：** "重构mvc实现struts框架" 这个标题表明了我们要探讨的主题是关于软件开发中的重构过程，特别关注的是如何从一个简单的MVC（Model-View-Controller）模型出发，逐步演进到实现Struts框架的初步形态。...

    基于EAPR的FPGA局部动态重构实现.pdf

    ISE（集成软件环境）是Xilinx公司提供的一个集芯片设计、仿真和实现于一体的开发工具，PlanAhead则提供了设计优化和规划功能。在本研究中，ISE用于模块设计，PlanAhead用于重构实现。 7. 重构模块（PRM）和重构区域...

    基于模块化设计方法实现FPGA动态部分重构

    通过一个实例介绍了采用模块化设计方法实现Virtex-E FPGA动态部分重构的过程，能使重构模块在系统运行时改变其逻辑功能，而固定模块逻辑功能不中断，同时器件的重构时间大大减少。 　随着可编程技术的不断发展，...

    采用haar小波实现一维信号的分解与重构(mallat算法)：

    在实现一维信号的分解与重构过程中，首先，我们需要对原始信号进行层次分解。这通常包括以下步骤： 1. **分解**：从最高分辨率（原始信号）开始，通过应用Haar小波滤波器，将信号分解为细节（高频）和近似（低频）两...

    利用MATLAB实现Sa信号的抽样与重构仿真.pdf

    利用MATLAB实现Sa信号的抽样与重构仿真

    基于FPGA的动态可重构系统设计与实现

    FPGA局部动态可重构技术的核心在于将整体系统按照功能或时序需求分解成不同的模块，并根据实际需求，分时对芯片进行局部动态重构，从而实现用较少的硬件资源实现较大时序系统整体功能的目标。 ##### 3.3 实现局部...

    33节点系统重构程序实现_33节点重构_33节点配电网重构_配电网IEEE—33_配电网_33节点

    压缩包中的"33节点系统重构程序实现"很可能是包含了上述流程的具体编程实现，可能包括数据输入模块、网络模型构建模块、潮流计算模块、重构策略求解模块和结果评估模块。通过这样的程序，研究人员和工程师可以快速地...

    基于FPGA的动态可重构系统实现研究.pdf

    基于FPGA的动态可重构技术的特征和原理包括：将系统按功能或时序分解成不同的部分，根据实际需要对芯片进行局部重配置，这样可以在使用有限硬件资源的情况下实现更大的系统功能。FPGA实现局部动态可重构需要具备重新...

    基于python实现轻量化重构网络的物体表面缺陷视觉检测源码+训练好的模型+数据集.zip

    【资源说明】基于python实现轻量化重构网络的物体表面缺陷视觉检测源码+训练好的模型+数据集.zip基于python实现轻量化重构网络的物体表面缺陷视觉检测源码+训练好的模型+数据集.zip基于python实现轻量化重构网络的...

    重构.pdf_电子版_pdf版

    重构是软件开发过程中的一个重要环节，与新功能的实现同样重要。 随着软件开发的持续进行，代码库可能会不断增长，这就导致了代码变得越来越复杂，难以管理和维护。代码的复杂性往往隐藏着潜在的错误和缺陷，使得新...

Magicbox
Global site tag (gtag.js) - Google Analytics