KnockoutJS - selectedOptions 绑定

更新于 2025/1/16 6:22:17

此绑定用于处理当前在多列表选择表单控件中选择的元素。此绑定只能与选项绑定和 <select> 表单控件一起使用。

当用户选择或取消选择多选列表中的项目时，这会将相应的值添加或删除到视图模型上的数组中。如果它是一个 Observable 数组，那么从 UI 中选择或取消选择的项目也会在 ViewModel 中的数组中更新，使其成为双向绑定方法。

语法

selectedOptions: <binding-array>

参数

此处的参数将是一个数组(也可以是一个 Observable)。来自 select 元素的活动项目存储在此数组中。较早的项目将被覆盖。
如果参数是 Observable 数组，则所选项目将在底层可观察对象发生变化时更新。如果没有使用 Observable 数组，则元素仅处理一次。

示例

让我们看看以下示例，该示例演示了 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>