3

ビューと、部分ビューがレンダリングされるループがあります。部分ビューでは、複数選択リストボックスがあります。したがって、ループ内のアイテムの数に基づいて、(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
}
4

1 に答える 1

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

編集：作業中のjsFiddleの例

私のjsFiddleソリューションは次のようになります（ループを組み合わせたので、選択した要素を1回だけ繰り返す必要があります）：

$(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;
            }    
        } 
    });
});
于 2012-08-03T22:04:33.513 に答える