KnockoutJS - selectedOptions 绑定
此绑定用于处理当前在多列表选择表单控件中选择的元素。此绑定只能与选项绑定和 <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>
输出
让我们执行以下步骤来查看上述代码的工作原理 −
将上述代码保存在 selectedoptions-bind.htm 文件中。
在浏览器中打开此 HTML 文件。
selectedTutorials 是一个用于存储所选选项的数组。
knockoutjs_declarative_bindings.html
