選択したアイテムを複数選択リストから他の複数選択リストにコピーします

ヘンリック

選択したアイテムをリストから他のリストにコピーできるようにしたい2つの複数選択リストがあります。「保存」ボタンをクリックして、ajax呼び出しまたはノックアウト投稿を介してコントローラーに投稿するまで、ビューモデルのプロパティを変更したいだけです。

これを達成する方法はありますか?

フォアハンドありがとう!

jsfiddle:

    'http://jsfiddle.net/aDahT/1420/
ジョンルーカス

まず、他の監視可能な配列にアクセスできるようにするには、ビューモデルで変数を「this」の値に設定する必要があります。

var SProcsViewModel = function () {
     var self=this;

それ以外の場合、「DB2にコピー」ボタンでは、この値はビューモデルではなくウィンドウになります。

次に、次のように、ある監視可能な配列から別の配列にコピーします。

    ko.utils.arrayForEach(self.selectedStoredProceduresInDb1(), function(value){
        console.log(value,this,self.storedProceduresInDB2);
       sprocs.push(value);
    });

ノックアウトユーティリティのarrayForEachは、監視可能な配列をきれいにループし、値は配列のインデックスではなく、配列アイテムになります($ .eachなど)。

(ドキュメントでもko.utilsをさらに調べる価値があります:ko utils docs

$ .eachを使用して、次のようにループを実行できます。

$.each(self.selectedStoredProceduresInDb1(), function(value){
        console.log(value,self.selectedStoredProceduresInDb1()[value]);
       sprocs.push(self.selectedStoredProceduresInDb1()[value]);
    });

最初に監視可能な配列にアクセスし、次にその配列のインデックスにアクセスすることを心配する必要があるため、少し複雑であることに注意してください。

リストから選択したアイテムを新しい配列sprocs追加するときに、それらを配列にプッシュしようとしますが、複数のアイテムがあるため、applyを使用する必要があります。

self.storedProceduresInDB2.push.apply(self.storedProceduresInDB2,sprocs);

これにより、2つのアレイがマージされます。

次に、選択したアイテムがリストに表示され、準備ができたらAJAXコードを呼び出して更新を行うことができます。

上記の変更でフィドルを作成しました。http://jsfiddle.net/jiggle/7zp5K/

更新:まだ存在しない場合にのみ、選択したリストにアイテムを追加します。

       ko.utils.arrayForEach(self.selectedStoredProceduresInDb1(), function(value){
            console.log(value,self.storedProceduresInDB2);
            var match = ko.utils.arrayFirst(self.storedProceduresInDB2(), function(item) {
                return value === item;
            });
            if (!match){
               sprocs.push(value);
            }
       });

これはko.utilsarrayFirstを使用します。これは、リスト内のすべてのアイテムをループし、アイテムが見つかった場合はtrueを返します。

次に、!matchを使用して一致が未定義(見つからない)であるかどうかを確認し、定義されていない(リストにない)場合は、リストに追加します。

このコードを含めるようにフィドルを更新しました。

追加:IDだけでなくJSONオブジェクトを使用するようにコードを変更することに関するコメントのHenrickの質問に応えて....:

optionsValue: 'Id'パラメーターを<select>(両方)から削除します

から:

<select multiple="multiple" height="5" data-bind="options:storedProceduresInDB1, 
optionsText: 'Name', optionsValue: 'Id', selectedOptions:selectedStoredProceduresInDb1"> </select>

に:

<select multiple="multiple" height="5" data-bind="options:storedProceduresInDB1, 
optionsText: 'Name', selectedOptions:selectedStoredProceduresInDb1"> </select>

これにより、オブジェクトのIdプロパティではなく、選択したアイテムがオブジェクト自体にバインドされます。

次に、コードで、選択したアイテム(現在は完全なオブジェクト)のIdプロパティで一致するものを探す必要があります。

var match = ko.utils.arrayFirst(self.storedProceduresInDB2(), function(item) {
            console.log('item in storedProceduresInDB2',value,item);
            return value.Id === item.Id;  //match to the Id property of the selected object
        });

新しい作業フィドルを参照してください:http//jsfiddle.net/jiggle/7zp5K/

この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。

侵害の場合は、連絡してください[email protected]

編集
0

コメントを追加

0

関連記事

分類Dev

複数選択リストの選択されたすべてのアイテムをJQueryAjaxに投稿します

分類Dev

Javascript | 選択したアイテムをリストボックスからtextareaにコピーします

分類Dev

ReactNativeでリストから選択した複数のアイテムを表示する方法

分類Dev

選択したアイテムを除く複数のアイテムをリストビューから削除します

分類Dev

選択したアイテムを除く複数のアイテムをリストビューから削除します

分類Dev

リストから複数の要素を選択します

分類Dev

複数選択リストビューを実行して、選択したアイテムを取得するにはどうすればよいですか?

分類Dev

vuejsコンポーネントの複数選択で選択されたアイテムを取得します

分類Dev

dblクリックで複数選択リストからアイテムを削除します

分類Dev

フラットリストから複数のアイテムを選択して削除する

分類Dev

複数の選択ボックスの1つからアイテムを選択しない場合、Accessの複数の「複数の選択リストボックス」に基づくVBAクエリ

分類Dev

複数値のリストボックスは、不要なアイテムを自動的に選択します

分類Dev

GSPは複数のリストから選択します

分類Dev

ブートストラップのリストから複数のアイテムを選択する

分類Dev

ブートストラップのリストから複数のアイテムを選択する

分類Dev

リストビューから複数のアイテムを選択し、ボタンのクリックでアクションを実行します

分類Dev

選択したすべてのアイテムをVBAのリストボックス(複数選択)に入れる方法

分類Dev

リスト内の複数のリストからデータフレーム要素を選択します

分類Dev

Androidリストビューで複数のアイテムを選択します

分類Dev

ボタンとダイアログのチェックボックスを使用してAndroidの複数のアイテムを選択し、選択したアイテムをボタンの代わりにリストビューに表示します

分類Dev

選択したすべての値をブートストラップから選択解除する方法-リセットボタン付きの複数選択?

分類Dev

別の複数選択2ボックスから選択したアイテムを削除するときに、複数選択2ボックスから選択したアイテムを削除する

分類Dev

以前に選択したアイテムをリストから削除します

分類Dev

1つのリストをLinqして、別のリストから複数のアイテムを選択します

分類Dev

ドロップダウンリストから複数のアイテムを選択し、MYSQLに複数の値を挿入する方法

分類Dev

ワードプレスは、選択したアイテムから複数の値を保存します

分類Dev

複数のイオンリストで選択したアイテムを強調表示する方法は?

分類Dev

選択したリストアイテムを選択して削除します

分類Dev

Androidリストビュー複数のアイテムが選択されました

Related 関連記事

  1. 1

    複数選択リストの選択されたすべてのアイテムをJQueryAjaxに投稿します

  2. 2

    Javascript | 選択したアイテムをリストボックスからtextareaにコピーします

  3. 3

    ReactNativeでリストから選択した複数のアイテムを表示する方法

  4. 4

    選択したアイテムを除く複数のアイテムをリストビューから削除します

  5. 5

    選択したアイテムを除く複数のアイテムをリストビューから削除します

  6. 6

    リストから複数の要素を選択します

  7. 7

    複数選択リストビューを実行して、選択したアイテムを取得するにはどうすればよいですか?

  8. 8

    vuejsコンポーネントの複数選択で選択されたアイテムを取得します

  9. 9

    dblクリックで複数選択リストからアイテムを削除します

  10. 10

    フラットリストから複数のアイテムを選択して削除する

  11. 11

    複数の選択ボックスの1つからアイテムを選択しない場合、Accessの複数の「複数の選択リストボックス」に基づくVBAクエリ

  12. 12

    複数値のリストボックスは、不要なアイテムを自動的に選択します

  13. 13

    GSPは複数のリストから選択します

  14. 14

    ブートストラップのリストから複数のアイテムを選択する

  15. 15

    ブートストラップのリストから複数のアイテムを選択する

  16. 16

    リストビューから複数のアイテムを選択し、ボタンのクリックでアクションを実行します

  17. 17

    選択したすべてのアイテムをVBAのリストボックス(複数選択)に入れる方法

  18. 18

    リスト内の複数のリストからデータフレーム要素を選択します

  19. 19

    Androidリストビューで複数のアイテムを選択します

  20. 20

    ボタンとダイアログのチェックボックスを使用してAndroidの複数のアイテムを選択し、選択したアイテムをボタンの代わりにリストビューに表示します

  21. 21

    選択したすべての値をブートストラップから選択解除する方法-リセットボタン付きの複数選択?

  22. 22

    別の複数選択2ボックスから選択したアイテムを削除するときに、複数選択2ボックスから選択したアイテムを削除する

  23. 23

    以前に選択したアイテムをリストから削除します

  24. 24

    1つのリストをLinqして、別のリストから複数のアイテムを選択します

  25. 25

    ドロップダウンリストから複数のアイテムを選択し、MYSQLに複数の値を挿入する方法

  26. 26

    ワードプレスは、選択したアイテムから複数の値を保存します

  27. 27

    複数のイオンリストで選択したアイテムを強調表示する方法は?

  28. 28

    選択したリストアイテムを選択して削除します

  29. 29

    Androidリストビュー複数のアイテムが選択されました

ホットタグ

アーカイブ