使用jquery查找所选项目的mvc列表框

时间:2012-08-03 21:55:16

标签: jquery

我有一个视图和一个循环,在其中呈现局部视图。在部分视图中,我有一个多选列表框。因此,基于循环中项目的计数,可以有(n)个列表框的数量。

我的目标是从第一个列表框中获取所有选定的项目(如果有的话),并在列表框的其余部分中预先选择它们。我不是试图附加到剩余的列表框,而只是在第一个中选择的任何内容,我会选择其余的。所有列表框都包含相同的项目。

我面临困难,只能从第一个找到所选索引或项目,然后我会在剩下的内容中进行预选,如果我能在第一个中获取所选项目的索引会有所帮助。它提供了所有列表框中的选定项目。请帮忙:

部分视图中的列表框解除

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

按钮,呈现功能

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

JS功能:

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

1 个答案:

答案 0 :(得分:7)

在您的示例中,您为列表框指定了“lstbox”的ID。您可以使用它来使用jQuery找到“列表框”:

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

从那里,您可以修改代码以过滤到所选的选项:

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

最后,为了获取索引,我们再次更改它并添加几行代码:

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
});

或稍微不同的方法,从您的选择器中取出:selected,然后手动检查该元素是否被选中(在性能方面可能更好):

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

然后您可以使用selectedIndices预先选择其余的,但首先我们必须找到它们:

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

然后更改他们选择的选项:

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

编辑:Working jsFiddle example

我的jsFiddle解决方案看起来像这样(我结合了循环,所以你只需要迭代一次选择元素):

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