在ASP.. NET MVC，我怎么能有列表框来管理两个列表的内容

有一篇文章讨论了可用性问题，并比较了多选输入的不同方法。这个资源应该对你有帮助。

我个人喜欢选项SCROLLABLE CHECKBOXES和ASMSELECT

我最近正在探索几个选项。

你可以试试这个纯javascript版本http://www.javascriptkit.com/script/script2/picklist.shtml

或者我开始构建一个JQuery插件，你可以使用作为一个起点http://jsfiddle.net/stokedout/aySLN/4/

(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();

一开始你只需要绑定一个@Html.DropDownListFor()和一些数据。