Question

Hello I have a loop which renders elements within a partial view. The elements are listboxesfor, the number of listboxesfor rendered varies depending on a condition which is not accessible within the partial view itself. What I am trying to do is to find the number of listboxes rendered by using a javascript function and possibly the first listbox and then i could loop through them. another way to do is to assign a class name and then count but i cant do that. please help.

function dosomething() {
            var x = document.getElementsByTagName("listbox");//This line always returns O 
            alert(x.length);
}

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

Answer 1

There’s no such thing as listbox in HTML. It simply doesn’t exist. In HTML terms (which is what you are manipulating wit hjavascript) the element is called select with the multiple="multiple" attribute allowing multiple selection.

So:

var x = document.getElementsByTagName("select");
// now when looping over this x variable make sure
// you check for the presence of the multiple="multiple"
// attribute which is the only thing which distinguishes
// what you call a ListBox from a DropDown.
for (var i = 0; i < x.length; i++)​ {
    var element = x[i];
    // I am not even sure if this is a good test for the presence
    // of the multiple attribute. Maybe it should work but can't guarantee
    // cross browser correctness
    if (element.multiple) {
        // we've got a list box here
    }
}

And if you decide to use jQuery:

var listBoxes = $('select[multiple]');