jquery-ui - 将数据从一个 Html.listboxfor 复制到 asp.net mvc 中的另一个列表框

Question

我有两个名为 A 和 B 的 Html.ListBoxFor。

1) A 具有从 DB 填充的数据，而 B 为空。

2) 我想要像 this 这样的功能其中列表 A 中的项目被放入列表 B 中。

$('.add').on('click', function() {
    var options = $('select.multiselect1 option:selected').sort().clone();
    $('select.multiselect2').append(options);
});
$('.addAll').on('click', function() {
    var options = $('select.multiselect1 option').sort().clone();
    $('select.multiselect2').append(options);
});
$('.remove').on('click', function() {
    $('select.multiselect2 option:selected').remove();
});
$('.removeAll').on('click', function() {
    $('select.multiselect2').empty();
});

3)我用 asp.net mvc 尝试了此操作，但无法获取模型和 Controller 中的选定项目。

4) 我想要一种在 asp.net mvc 中执行此操作的方法。如果 mvc 中有某种方法，那么我将能够将该数据存储在 SQL DB 中

5) 它的 jquery 兄弟是 here

如有任何帮助，我们将不胜感激

Answer 1

我想这会对你有帮助。

block 引用

HTML 文件

Fruits:
        <select multiple="multiple" id="a">
            <option value="1">Apple</option>
            <option value="2">Orange</option>
            <option value="3">Banana</option>
        </select>

        <input type="button" id="add" value="Add"/>
         <input type="button" id="addall" value="Add all"/>
        <select multiple="multiple" id="b">

        </select>

Javascript 文件

$("#add").bind("click", function () {
        addOption(false);

 });

$("#addall").bind("click", function () {
    addOption(true);

});

function addOption(isAll){
    var option = $("#a option");
    if (!isAll) {
       option = $("#a option:selected");
    } else {
       $("#b").html("");
    }

    $(option).each(function () {
       var val = $(this).val();
       var text = $(this).text();
       $("#b").append($(this)[0].outerHTML);
       $(this).remove();
    });
}