KnockoutJS-selectedOptionsバインディング

このバインディングは、複数リスト選択フォームコントロールで現在選択されている要素を操作するために使用されます。このバインディングは、オプションバインディングおよび<select>フォームコントロールでのみ使用できます。

ユーザーが複数選択リストでアイテムを選択または選択解除すると、対応する値がビューモデルの配列に追加または削除されます。 Observable配列の場合、UIで選択または選択解除された項目もViewModelの配列で更新され、双方向バインディングメソッドになります。

構文

selectedOptions: <binding-array>

パラメーター

ここのパラメーターは配列になります（Observableになることもあります）。 select要素のアクティブなアイテムは、この配列に保存されます。以前のアイテムは上書きされます。
パラメーターがObservable配列の場合、選択されたアイテムは、基礎となるObservableが変更されると更新されます。 Observable配列が使用されていない場合、要素は1回だけ処理されます。

例

selectedOptions Bindingの使用方法を示す次の例を見てみましょう。

<!DOCTYPE html>
   <head>
      <title>KnockoutJS selectedOptions Binding</title>
      <script src = "https://ajax.aspnetcdn.com/ajax/knockout/knockout-3.3.0.js"
         type = "text/javascript"></script>
   </head>

   <body>
      <p>Tutorials Library:<br><br>
      <select size = 10 multiple = 'true' data-bind = "
         options: availableTutorials,
         selectedOptions: selectedTutorials
      "></select></p>

      <p>(Press control and select for multiple options.)</p>
      <p>You have chosen below Tutorials:</p>
      <ul data-bind = "foreach: selectedTutorials">
         <li>
            <span data-bind = "text: $data"> </span>
         </li>
      </ul>

      <script type = "text/javascript">
         function ViewModel() {
            self = this;
            self.availableTutorials = ko.observableArray ([
               'Academic','Big Data','Databases',
               'Java Technologies','Mainframe',
               'Management','Microsoft Technologies',
               'Mobile Development','Programming','Software Quality'
            ]);

            self.selectedTutorials = ko.observableArray();
         };

         var vm = new ViewModel();
         ko.applyBindings(vm);
      </script>

   </body>
</html>

出力

上記のコードがどのように機能するかを確認するために、次の手順を実行してみましょう-

上記のコードを selectedoptions-bind ファイルに保存します。
このHTMLファイルをブラウザーで開きます。
selectedTutorialsは、選択したオプションを保存する配列です。

Knockoutjs-selectedoptions-binding

KnockoutJS-selectedOptionsバインディング

構文

パラメーター

例

出力

目次