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

最新推荐文章于 2020-10-30 10:44:33 发布

最新推荐文章于 2020-10-30 10:44:33 发布 · 143 阅读

文章标签：

本文介绍使用 JQuery 实现 Select 多选框的左右添加和删除功能的方法。通过自定义函数 initCandidateList、attachAddButtonEvent 和 attachDeleteButtonEvent 来初始化候选列表、绑定添加和删除按钮事件。

很久很久以前，我刚听说过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>