Knockout.js隨手記(4)

Halower發表於2013-07-21
JS

動態繫結下拉選單

　　　在<select> data-bind的options選項如果繫結到ko.observableArray()，就可以動態新增選項效果，也就是可以利用其完成常見的級聯效果的。

在這一篇文章中，我們用單頁面完成無重新整理的前臺新增選項和使用MVC完成後臺的動態新增2個例子。

範例一：

ViewModel中宣告一個selectOptions屬性為一個ko.observableArray()物件，並將其設為<select>的options下拉選單的資料來源，再用兩個<input>分別輸入入Text及Value，輸入內容點選新增按鈕，此時就可看到下拉選單出現新增的選項內容。

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
  <title>動態新增下拉選單選項</title>
    <script src="Scripts/jquery-2.0.3.js"></script>
    <script src="Scripts/knockout-2.3.0.js"></script>
   <script type="text/javascript">
       //建立一個View物件
       function ViewModel() {
           var self = this;
           //使用observableArray進行繫結可以動態變更option選項
           self.selectOptions = ko.observableArray([
                { "text": "請選擇", "value": "0" }
           ]);
           self.result = ko.observable("0");//新增result監控屬性，初始繫結值為0
       }

       $(function () {
           var vm = new ViewModel();
           ko.applyBindings(vm);
           $("#btnAddItem").click(function () {
               vm.selectOptions.push({
                   "text": $("#txtOptText").val(),
                   "value": $("#txtOptValue").val()
               });
           });
       });
   </script>
    </head>
<body>
    <div style=" background-color:#0094ff; width:180px; margin:100px auto auto auto;">
        <select style="background-color:ActiveCaption;width:100px" data-bind="options: selectOptions, optionsText: 'text', optionsValue: 'value', value: result"></select>Value=<span data-bind="    text: result"></span>
        <div> Text: <input id="txtOptText" value="選項1"/></div>
        <div>Value: <input id="txtOptValue" value="1" /></div>
        <input type="button" value="新增選項" id='btnAddItem' />
 </div>
</body>
</html>

執行效果如下：

範例二：Mvc結合knockout.js完成級聯下拉選單 

本例只是為了模擬，所以資料比較簡陋，當然也可以從資料庫中出資料來進行處理。

@{
    Layout = null;
}

<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>Index</title>
    <script src="~/Scripts/jquery-2.0.3.js"></script>
    <script src="~/Scripts/knockout-2.3.0.debug.js"></script>

    </head>
    <body>
      <p>
        <b style="color:#0094ff">選擇學生:</b> @Html.DropDownList("Student", ViewBag.Students  as SelectList, "請選擇", new { onchange = "searchLover();" })
     </p>
      <p data-bind="visible: selectOptions().length > 0">
      <b style="color:#0094ff">喜愛的事物:</b>
      <select data-bind="options: selectOptions, optionsText: 'Name', optionsValue: 'Value', optionsCaption: '請選擇'">
      </select>
</p>
    </body>
    <script type="text/javascript">
        function ViewModel() {
            this.selectOptions = ko.observableArray([]);
        }
        var vm = new ViewModel();
        ko.applyBindings(vm);
        function searchLover() {
            var id= $("#Student").val();
            $.getJSON(
                   "@Url.Action("GetLovers")",
                    { studentId: id},
                    function (data) {
                        vm.selectOptions(data);
            });
        }
</script>
</html>

-------------------------------------Controller中的資料模擬程式碼------------------------------------

using System.Collections.Generic;
using System.Web.Mvc;

namespace KnockFunctionDemo.Controllers
{
    public class HomeController : Controller
    {
        public ViewResult Index()
        {
            ViewBag.Students = new SelectList(GetStudentList(),"Id","Name");
            return View();
        }
        private static List<Student> GetStudentList()
        {
            return new List<Student>
            {
                new Student{ Id=001, Name="halower"},
                 new Student{ Id=002, Name="rohelm"}
            };
        }
        public JsonResult GetLovers(int studentId)
        {
            var list = new List<Lover>();
            if (studentId == null)
                list= null;
            else if (studentId == 001)
            {
                list.Add(new Lover { Name = "程式設計", Value = "program" });
                list.Add(new Lover { Name = "女朋友", Value = "GF" });
            }
            else
            {
                list.Add(new Lover { Name = "旅遊", Value = "travel" });
                list.Add(new Lover { Name = "家庭", Value = "family" });
            }
            return  Json(list, JsonRequestBehavior.AllowGet);
        }
        
    }

   
    public class Student
    {
        public int Id { get; set; }
        public string Name { get; set; }
    }

    public class Lover
    {
        public string Value { get; set; }
        public string Name { get; set; }
    }
}

執行效果：

 

 

備註：

    本文版權歸大家共用，不歸本人所有，所有知識都來自於官網支援，書本，國內外論壇，大牛分享等等......後續將學習knockout.js的常用功能。

 

 

相關文章