Javascript 在ASP.NET MVC中，如何让列表框管理两个列表的内容

在一个用ASP MVC制作的网站中，我被要求建立一个页面，提供管理两个字符串列表内容的功能，如

两个列表框需要是单选的，带有一个按钮可以将项目从一侧切换到另一侧

我希望它是客户端的，以便在提交表单时，模型绑定器可以将更新的字符串列表发布到控件

任何人都知道这样的控件是否已经存在，比如jqueryUI中提供的控件。如果没有，对如何实现这一结果有何建议

---

谢谢大家

我最近正在探索几个选择

您可以尝试这个纯javascript版本

或者我开始构建一个JQuery插件，您可以将其用作起点

（函数（$）{
$.fn.twinList=函数（选项）{
变量设置=$.extend({
//造型
集装箱类：“twl集装箱”，
btn容器类：“twl btn容器”，
leftListClass:'twl list left'，
rightListClass:“twl列表右侧”，
SelectBTN类：“twl btn select”，
SelectAllBTN类：“twl btn全选”，
取消选择类：“twl btn取消选择”，
取消全部btn类：“twl btn取消全部选择”，
//内容
选择btntext:“>”，
选择AllBTntext:“>>”，
取消选择文本：“有一个讨论可用性问题并比较多选择输入的不同方法的示例。此资源应该对您有所帮助

就我个人而言，我喜欢选项滚动复选框和ASMSELECT。你提交的文章给了我一些见解。我想要的答案实际上在文章相关资源中：“使用jQuery进行多选传输”8行javascript代码和一个dropdownlist。简单高效！谢谢！对于未来的访问者，我将结合此客户端解决方案和此链接中提供的服务器端代码与控件绑定。谢谢，如果我的用户需要更高级的控件功能，我可能会在其中使用一些想法！我会当我获得足够的声誉时，我会投票给你！没问题，@Dmitry的可滚动复选框解决方案看起来不错；-）
(function ($) {

$.fn.twinList = function (options) {

    var settings = $.extend({

        // Styling
        containerClass: 'twl-container',
        btnContainerClass: 'twl-btn-container',
        leftListClass: 'twl-list left',
        rightListClass: 'twl-list right',
        selectBtnClass: 'twl-btn select',
        selectAllBtnClass: 'twl-btn select-all',
        deselectBtnClass: 'twl-btn deselect',
        deselectAllBtnClass: 'twl-btn deselect-all',

        // Content
        selectBtnText: '>',
        selectAllBtnText: '>>',
        deselectBtnText: '<',
        deselectAllBtnText: '<<',

        // Config
        debug:true
    }, options);

    return this.each(function () {

        var originalList = $(this),
            originalOptions = originalList.find('option'),
            container,
            btnContainer,
            leftList,
            rightList,
            select,
            selectAll,
            deselect,
            deselectAll;

        var updateOriginalInput = function () {

            var rlOptions = rightList.find('option');

            originalOptions.prop('selected', false);

            for (var i = 0; i < originalOptions.length; i++) {
                for (var j = 0; j < rlOptions.length; j++) {
                    if (originalOptions[i].value === rlOptions[j].value) {
                        originalOptions[i].selected = true;
                    }
                }
            }
        }

        container = $('<div/>', {
            'class': settings.containerClass
        });

        leftList = $('<select/>', {
            'class': settings.leftListClass,
            multiple: true
        });

        rightList = $('<select/>', {
            'class': settings.rightListClass,
            multiple: true
        });

        btnContainer = $('<div/>', {
            'class': settings.btnContainerClass
        });

        select = $('<a>', {
            text: settings.selectBtnText,
                'class': settings.selectBtnClass,
            href: '#',
            click: function (e) {
                leftList.find('option:selected').appendTo(rightList);
                updateOriginalInput();
            }
        });

        selectAll = $('<a>', {
            text: settings.selectAllBtnText,
                'class': settings.selectAllBtnClass,
            href: '#',
            click: function (e) {
                leftList.find('option').appendTo(rightList);
                originalOptions.prop('selected', true);
            }
        });

        deselect = $('<a>', {
            text: settings.deselectBtnText,
                'class': settings.deselectBtnClass,
            href: '#',
            click: function (e) {
                rightList.find('option:selected').appendTo(leftList);
                updateOriginalInput();
            }
        });

        deselectAll = $('<a>', {
            text: settings.deselectAllBtnText,
                'class': settings.deselectAllBtnClass,
            href: '#',
            click: function (e) {
                rightList.find('option').appendTo(leftList);
                originalOptions.prop('selected', false);
            }
        });

        leftList.append(originalOptions.clone());

        btnContainer.append(select)
            .append(selectAll)
            .append(deselect)
            .append(deselectAll);

        container.append(leftList)
            .append(btnContainer)
            .append(rightList);

        container.insertAfter(originalList);

        if (!settings.debug)
            originalList.hide();
    });

};

})(jQuery);

$('#someList').twinList();