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

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

我个人喜欢SCROLLABLE CHECKBOXES和ASMSELECT选项

在ASP.NET MVC中，如何使用Listbox来管理两个列表的内容

2 个答案: