MVC 3 In Multiple listboxes , How to transfer listbox items using jquery

I have (n) number of listboxes for. I have a button which executes a function and within that function I am trying to get the selected items of the first listbox and whatever indexes/items are selected in the first one, I will select the same options in the remaining listboxes. All listboxes have the exact same list items.

ListBox:

@Html.ListBoxFor(model => model.ServiceTypes, new MultiSelectList(RunLog.Domain.Lists.GlobalList.PartsServiceTypes(), "ID", "Name"), new { style = "width: 200px; height: 80px;", id = "lstbox_@(model.PartID)" })

Button:

@*<input id="button" type="button" class="art" onclick="dosomething()" name="broadcast" value="+" />*@

JS Function:

function dosomething() {

    //The following line returns all the listboxes
    var listBoxes =  var listBoxes = $('select[multiple]');

    //In the following line I am trying to access the items from the first listbox but not sure how to access it, would it be by index. it does not work
    var x = $('listBoxes[1] option:selected')

    //In the following loop I would iterate through the selected items from the first listbox and select them in the rest of the listboxes
    for (var i = 0; i < listBoxes.length; i++) {
        var element = listBoxes[i];

//      if (element.multiple) {
//          alert("im a multilistbox");
//      }

    }
}

Answers


Try something like this:

@{
var list = new List<string>();
list.Add("one");
list.Add("two");
list.Add("three");
}

@Html.ListBox("listbox", new SelectList(list), new { id = "listbox", multiple = "multiple" })

<input type="button" value="Click me!" onclick="GetSelected()" />

<script type="text/javascript">
    function GetSelected() {
        var listboxitems = document.getElementById("listbox");

        for (var i = 0; i < listboxitems.length; i++) {
            if (listboxitems[i].selected) {
                alert(listboxitems[i].textContent);
            }
        }
    }
</script>

You can save the text content of a list item like this, obviously:

var element = listboxitems[i].textContent;  

Update: In response to your comment, try this example:

@{
    var list = new List<string>();
    list.Add("one");
    list.Add("two");
    list.Add("three");

    int i;

    for(i = 0; i < 5; i++)
    {
        @Html.ListBox("listbox"+i, new SelectList(list), new { id = "listbox" + i, multiple = "multiple" })
    }
}

<input type="button" value="Click me!" onclick="GetSelected()" />

<script type="text/javascript">
function GetSelected() {
    var index = @i;

    var firstListBoxItems = document.getElementById("listbox0");

    for (n = 1; n < index; n++) {
        var currentListBoxItems = document.getElementById("listbox"+n);

        for (var i = 0; i < firstListBoxItems.length; i++) {
            if (firstListBoxItems[i].selected) {
                currentListBoxItems[i].value = "NewValue"+i;
            }
        }
    }
}
</script>  

If you fetch some random list again, using the debugger you can inspect and see the values have changed.

I'm still new to web programming myself so this might look ugly, but it should give you an idea of how to accomplish your task.


Need Your Help

Microsoft Z3: Convert expressions to specific variables

z3 solver smt

I'm using Microsoft's Z3 for some simple analyses of dynamic observations. As part of this, it would be helpful if I could transform some formulae from using one set of variables into another targ...

DOM Range clones are not immune to DOM changes

javascript dom range

I am making a clone of a DOM Range using cloneRange() function. If I then modify the original range object like this: