Knockout學習（2）之observableArray，監控陣列，展示下拉框
阿新 • • 發佈：2019-01-29
ko對於陣列下拉框，監控跟蹤屬性值關鍵字為：observableArray，繫結值關鍵字為：options
例子如下：
@{ ViewBag.Title = "Index2"; } <h2>Index2</h2> <head> <script src="~/Scripts/jquery-1.10.2.min.js"></script> <script src="~/Scripts/KnockOut.js"></script> <script> $(function () { var ViewMode =function () { this.UserNames = ko.observableArray(["張三", "李四", "王五"]); }; ko.applyBindings(ViewMode); }); </script> </head> <body> <select data-bind="options:UserNames> </select> </body>
這樣，就綁定了一個下拉框，效果如下：
我們通常還需要獲取下拉框的值，也可以用到ko
ko對於下拉框選中值：監控跟蹤屬性值關鍵字為：observable，繫結值關鍵字為：selectedOptions
只需這樣：
@{ ViewBag.Title = "Index2"; } <h2>Index2</h2> <head> <script src="~/Scripts/jquery-1.10.2.min.js"></script> <script src="~/Scripts/KnockOut.js"></script> <script> $(function () { var ViewMode =function () { this.UserNames = ko.observableArray(["張三", "李四", "王五"]); this.UserName = ko.observable(); }; ko.applyBindings(ViewMode); }); </script> </head> <body> <select data-bind="options:UserNames,selectedOptions:UserName"> </select> <br /> 當前選擇的值為： <span data-bind="html:UserName"></span> </body>
效果如下：
---------------------------------------------------------------------------------------------------------------------------------
有時，我們下拉框展示的值與實際獲取到的值一般不一致，ko也有Text與Value兩個屬性，所以上面的程式碼可以這樣改：
@{ ViewBag.Title = "Index2"; } <h2>Index2</h2> <head> <script src="~/Scripts/jquery-1.10.2.min.js"></script> <script src="~/Scripts/KnockOut.js"></script> <script> $(function () { var ViewMode = function () { //this.UserNames = ko.observableArray([ "張三", "李四", "王五"]); this.UserNames = ko.observableArray([{ Text: "張三", Value: "1" }, { Text: "李四", Value: 2 }, { Text: "王五", Value: 3 }]); this.UserName = ko.observable(); }; ko.applyBindings(ViewMode); }); </script> </head> <body> @*<select data-bind="options:UserNames,selectedOptions:UserName"></select>*@ <select data-bind="options:UserNames,optionsText:'Text',optionsValue:'Value',selectedOptions:UserName"></select> <br /> 當前選擇的值為： <span data-bind="html:UserName"></span> </body>
前端介面展示如下：
