请提出一个好的解决方案答案

【问题标题】：Please suggest a good solution请提出一个好的解决方案
【发布时间】：2011-03-23 16:46:32
【问题描述】：

在我的项目中，我想在需要保留两个列表框（asp 控件）的地方实现代码，并且我想在这两个列表框之间实现添加删除之类的功能，即从列表框中删除一项应该添加应该先添加到另一个并从另一个移除。

如何使用 JavaScript 来实现这个效果？任何指向教程的链接也会有所帮助。提前致谢。

【问题讨论】：

Java 还是 JavaScript？除此之外，到目前为止你还尝试过什么？
我们需要更多细节，尽可能清晰，才能提供帮助。有人可以基于此给您的基本建议是“学习使用 jQuery”，这可能有帮助，也可能没有帮助。
我相信他想做这样的事情：jsfiddle.net/7tZ6H

【解决方案1】：

如果你有这样的 HTML：

<select id="listBox1" size="5">
<option value="1">Item 1</option>
<option value="2">Item 2</option>
<option value="3">Item 3</option>
</select>

<select id="listBox2" size="5">
<option value="4">Item 4</option>
<option value="5">Item 5</option>
<option value="6">Item 6</option>
</select>

<a href="#" id="moveLink">Move selected from list 1 to list 2</a>

那么下面的 jquery 会在点击 moveLink 时从列表 1 中取出选定的项目并将它们移动到列表 2。

$(function() {
    $('#moveLink').click(function() {
        $('#listBox1 option:selected').each(function(i, opt) {
            $('#listBox2').append($('<option></option>').attr('value', opt.val()).text(opt.text());

            $(opt).remove();
        });
    });
});

访问 www.jquery.com 以获取要包含在页面中的库以使其正常工作。

【讨论】：

【解决方案2】：

你可以使用我这里提供的源代码，复制自http://www.johnwbartlett.com/CF_tipsNtricks/index.cfm?TopicID=86

<html>
<head>
<title>Multi-list copy example</title>
<body>
<script language="Javascript">
function SelectMoveRows(SS1,SS2)
{
    var SelID='';
    var SelText='';
    // Move rows from SS1 to SS2 from bottom to top
    for (i=SS1.options.length - 1; i>=0; i--)
    {
        if (SS1.options[i].selected == true)
        {
            SelID=SS1.options[i].value;
            SelText=SS1.options[i].text;
            var newRow = new Option(SelText,SelID);
            SS2.options[SS2.length]=newRow;
            SS1.options[i]=null;
        }
    }
    SelectSort(SS2);
}
function SelectSort(SelList)
{
    var ID='';
    var Text='';
    for (x=0; x < SelList.length - 1; x++)
    {
        for (y=x + 1; y < SelList.length; y++)
        {
            if (SelList[x].text > SelList[y].text)
            {
                // Swap rows
                ID=SelList[x].value;
                Text=SelList[x].text;
                SelList[x].value=SelList[y].value;
                SelList[x].text=SelList[y].text;
                SelList[y].value=ID;
                SelList[y].text=Text;
            }
        }
    }
}
</script>
<form name="Example">
<table border="0" cellpadding="3" cellspacing="0">
    <tr>
        <td>
            <select name="Features" size="9" MULTIPLE>
                <option value="2">Row 2</option>
                <option value="4">Row 4</option>
                <option value="5">Row 5</option>
                <option value="6">Row 6</option>
                <option value="7">Row 7</option>
                <option value="8">Row 8</option>
                <option value="9">Row 9</option>
            </select>
        </td>
        <td align="center" valign="middle">
            <input type="Button" value="Add >>" style="width:100px" onClick="SelectMoveRows(document.Example.Features,document.Example.FeatureCodes)"><br>
            <br>
            <input type="Button" value="<< Remove" style="width:100px" onClick="SelectMoveRows(document.Example.FeatureCodes,document.Example.Features)">
        </td>
        <td>
            <select name="FeatureCodes" size="9" MULTIPLE>
                <option value="1">Row 1</option>
                <option value="3">Row 3</option>
            </select>
        </td>
    </tr>
</table>
</form>

</body>
</html>

【讨论】：

【解决方案3】：

这可能是您需要的： http://www.dotnetspider.com/resources/21388-Add-Remove-from-one-Listbox-another-ListBox.aspx

【讨论】：