1

したがって、2つの単純なselectboxコントロール（MVCでは@ Html.ListBoxFor）があります。

ユーザーが左側の選択ボックスから選択し、選択したアイテムを右側に移動できるようにします。これはうまく機能します（http://jsfiddle.net/tekguy/NJGzu/の例を参照してください） 。

しかし、どうすれば正しいリストボックスのすべてをMVCに渡すことができますか？

この問題は、ユーザーが誤って右側のボックスの1つの項目をクリックした場合に発生し、他のすべての項目が選択解除され、それがコントローラーに返される唯一の値になります。

これを改善する方法について何かアイデアはありますか？私はjavascriptを使用して、フォーム投稿の適切なテキストボックス内のすべてを選択することを考えていました。しかし、この問題を解決する他の方法はありますか？

HTMLコード：

<select id="list1" multiple>
    <option value="1">Option 1</option>
    <option value="2">Option 2</option>
    <option value="3">Option 3</option>
</select>

<input type="button" value=">>" id="moveRight" />
<input type="button" value="<<" id="moveLeft" />

<select id="list2" multiple>
    <option value="4">Option 4</option>
</select>

JAVA-スクリプトコード：

$( function() {
    $('#moveRight').click(function(){
        $('#list1 option:selected').each(function(){
            $(this).remove().appendTo("#list2");
        });
    });

    $('#moveLeft').click(function(){
        $('#list2 option:selected').each(function(){
            $(this).remove().appendTo("#list1");
        });
    });
});
4

2 に答える 2

0

プロジェクトのためにしばらく前にこれに似たものが必要でした。選択された選択アイテムのみが返送されていることがわかりました。あなたが提案したように、私はjavascriptを使用しました。このようなものが私にとってはうまくいきました。

$("#MassUpdateForm").submit(function() {
    $("#select_right").children("option").each(function() {
        this.selected = true;
    });
});
于 2013-01-14T22:36:53.377 に答える
0

要素を追加するためにループする必要はありません。特定の要素は dom に一度しか存在できません。そのため、複製して追加しない限り、最初に要素を削除する必要はありません。次に、フォームの送信イベント内ですべてのオプションを選択済みに変更できます

$(function () {
  $('#moveRight').click(function () {
    $('#list1 option:selected').appendTo("#list2"); // this will move all selected options to right side
  });
  $('#moveLeft').click(function () {
    $('#list2 option:selected').appendTo("#list1"); // this will move all selected options to left side
  });
  $('yourform').on('submit', function () {
    $('#list2 option').prop('selected', true); // set all options on right side to selected
  });
});
于 2013-01-14T22:48:14.263 に答える