Question

I have a view and a loop within which a partial view is rendered. With the partial view I have a multi select listbox. So based on count of a item in the loop there could (n) number of listboxes.

My goal is to get all the selected items if any from the first listbox and pre-select them in the remainder of the listboxes. I am not trying to append to the remaining listboxes but just whatever is selected in the first, i would select in the remaining. all the listboxes will have the same items in them.

I am facing diffculty to find the selected indexes or items only from the first one and then i will do the preselection in the remaining, if i could just get the indexes of the selected items in the first one would be helpful. It gives selected items from all the listboxes. please help:

listbox decleration within the partial view

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

button which renders the function

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

JS Function:

function broadcast() {
    //var element = $('select[multiple]'); This gives me access of all listboxes
    // var firstListBoxSelected = $('select[multiple][1] option:selected').text(); t
}

Answer 1

In your example, you gave your listbox the id of “lstbox”. You can use this to find the “list box” using jQuery:

var box = $('#lstbox'); // or $('select[multiple]:first') for just the first one

From there, you can modify the code to filter down to just the selected options:

var selected = $('#lstbox option:selected');

And finally, to get the indexes, we change it again and add just a couple more lines of code:

var selectedIndices = []; // create an empty array
$.each($('#lstbox option:selected'), function(index, value) { // loop over each option
    selectedIndices.push(index); // add the index to the array
});

Or a slightly different approach, taking :selected out of your selector and instead manually checking whether the element is selected (might be a hair better in terms of performance):

var selectedIndices = [];
$.each($('#lstbox option'), function(index, value) {
    if (this.selected) { // 'this' is the current DOM element, same as 'value'
        selectedIndices.push(index);
    }
});

Then you can use selectedIndices to pre-select the remaining ones, but first we have to find them:

var otherBoxes = $('select[multiple]:not(:first)'); // not the first one
// or
var otherBoxes = $('select[multiple]:gt(0)'); // greater than the 0th one

And then change their selected options:

var numSelected = selectedIndices.length;
$.each(otherBoxes, function() {
    for (int i = 0; i < numSelected; i++) {
        this.options[selectedIndices[i]].selected = true;
    }
});

EDIT: Working jsFiddle example

My jsFiddle solution looks like this (I combined the loops so you only have to iterate the select elements once):

$(function() {
    var selectedIndices = [];
    $.each($('select[multiple]'), function(sIndex, sValue) {
        if (sIndex == 0) {
            $.each(this.options, function (oIndex, oValue) {
                if (this.selected)
                    selectedIndices.push(oIndex);
            });
        } else {
            for (var i = 0; i < selectedIndices.length; i++) {
                this.options[selectedIndices[i]].selected = true;
            }    
        } 
    });
});