CODEWITHSUNDEEP
jquery-uimodel-view-controllerjqueryasp.net-mvc-4
Shalin Jirawla
Shalin Jirawla

Reputation: 499

copy data from one Html.listboxfor to other listbox in asp.net mvc

I have two Html.ListBoxFor called A & B.

1) A has data populated from DB & B is empty.

2) I want a functionality like this where items from list A are placed into list 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) I tried this with asp.net mvc, but I was unable to fetch the selected items in model & controller.

4) I want a way by which we can perform this in asp.net mvc. If there can be some way in mvc then I would be able to store that data in SQL DB

5) Its jquery sibling is here

Any help would be appreciated

Upvotes: 4

Views: 1690

Answers (1)

pixelbyaj
pixelbyaj

Reputation: 1178

I think this will help you.

Blockquote

Html file

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 File

$("#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();
    });
}

Upvotes: 1

Related Questions