KnockoutJS - selectedOptions 繫結

該繫結用於處理當前在多列表選擇表單控制元件中選定的元素。該繫結只能與 option 繫結和 <select> 表單控制元件一起使用。

當用戶在多選列表中選擇或取消選擇一個專案時，這會向檢視模型中的陣列新增或刪除相應的值。如果它是可觀察陣列，則從 UI 選擇或取消選擇的專案也會在 ViewModel 中的陣列中更新，使其成為雙向繫結方法。

語法

selectedOptions: <binding-array>

引數

此處的引數將是一個數組（也可以是可觀察陣列）。select 元素中的活動項儲存在此陣列中。以前的專案將被覆蓋。
如果引數是可觀察陣列，那麼選定的專案將在基礎可觀察項發生更改時更新。如果未使用可觀察陣列，則該元素只處理一次。

示例

讓我們看一個示例，演示如何使用 selectedOptions 繫結。

現場演示

<!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.htm 檔案中。
在瀏覽器中開啟此 HTML 檔案。
selectedTutorials 是一個用於儲存所選選項的陣列。

knockoutjs_declarative_bindings.htm

列印頁面

上一個

下一個