javascript - 在 ASP.NET MVC 中，如何让 Listboxes 管理两个列表的内容

Question

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

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

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

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

非常感谢各位！

Answer 1

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

你可以试试这个纯 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() 与一些数据绑定。

Answer 2

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

我个人喜欢选项 SCROLLABLE CHECKBOXES 和 ASMSELECT