动态绑定下拉列表

　　　在<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=, Name="halower"},

                 new Student{ Id=, Name="rohelm"}

            };

        }

        public JsonResult GetLovers(int studentId)

        {

            var list = new List<Lover>();

            if (studentId == null)

                list= null;

            else if (studentId == )

            {

                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的常用功能。

Knockout.js随手记(4)的更多相关文章

  1. Knockout.js随手记(2)

    计算属性 konckout.js的API文档,写的极为详细和生动,透过MVVM的运作原理,开发时只需专注于定义ViewModel逻辑,不需耗费心力处理TextBox.Select的onchange.o ...

  2. Knockout.js随手记(8)

    visible, disable, css绑定 这个例子非常简单,主要演示如何通过属性控制html元素的显示与否(visible),可用性(disable)以及根据属性添加相应的CSS样式. 先简单的 ...

  3. Knockout.js随手记(7)

    数组元素的新增/移除事件 前两篇博客已经很清楚的知道knockout.js通过observableArray()数组元素增减,可以实时的反映在UI上.当然我们想在数组增加或移除元素时加上自定义逻辑就好 ...

  4. Knockout.js随手记(6)

    实时反映对象属性的变化 在前一篇博客中我们使用了如下代码去新增user对象,即push方法: $("#btnAddUser").click(function () { vm.use ...

  5. Knockout.js随手记(5)

    以列表方式呈现数据  处理以数组形式储存的多条数据,要先认识foreach.在ViewModel定义一个JavaScript Array或是ko.observableArray() (observab ...

  6. Knockout.js随手记(3)

    下拉菜单 <select>也是网页设计重要的一环,knockout.js(以下简称KO)也有不错的支持.针对<select>,在data-bind除了用value可对应下拉菜单 ...

  7. Knockout.js随手记(1)

    新的开始,knockout.js 1.首先去http://knockoutjs.com/index.html下载knockout.js,最新的版本是2.3 2.知道什么是Knockout?它是个Jav ...

  8. 【Knockout.js 学习体验之旅】（3）模板绑定

    本文是[Knockout.js 学习体验之旅]系列文章的第3篇,所有demo均基于目前knockout.js的最新版本(3.4.0).小茄才识有限,文中若有不当之处,还望大家指出. 目录: [Knoc ...

  9. 【Knockout.js 学习体验之旅】（2）花式捆绑

    本文是[Knockout.js 学习体验之旅]系列文章的第2篇,所有demo均基于目前knockout.js的最新版本(3.4.0).小茄才识有限,文中若有不当之处,还望大家指出. 目录: [Knoc ...

随机推荐

  1. 教你一招：Excel中使用vlookup函数查询序列所对应的值

    以一个简单的例子做示范,列数相对较少,看起来也比较清楚:在奥运会或其他比赛上我们可以看到各个国家的奖牌数的变化:那么我们如何查询国家对应的总奖牌数. 我们用到的函数是vlookup,它是一个纵向查询函 ...

  2. Ubuntu 14.04 无线网卡驱动安装

    安装了Ubuntu最新版本 14.04 之后,发现无线网卡不能使用,偿试安装驱动后,问题解决. 首先确定无线网卡类型: lspci -vnn -d 14e4: 比如我的网卡类型为 06:00.0 Ne ...

  3. jsp项目部署

    每新建一个项目都要发布到服务器,也就是项目部署,在tomcat中的  tomcat\Tomcat 6.0\webapps  路径下就会新建你的项目文件夹 webapps是tomcat的默认访问路径,很 ...

  4. COGS439. [网络流24题] 软件补丁

    [问题描述] 对于一个软件公司来说,在发行一个新软件之后,可以说已经完成了工作.但是实际上,许多软件公司在发行一个新产品之后,还经常发送补丁程序,修改原产品中的错误(当然,有些补丁是要收费的). 如某 ...

  5. bzoj2503&poj3387[NEERC2006]IdealFrame

    其实只是把别人的题解强行扩写了 写这篇题解之前我不会的预备知识: 欧拉通路:从图中一个点出发不重复地遍历所有边的路径(可以停在另一个点) 欧拉回路:从图中一个点出发不重复地遍历所有边的回路(必须回到出 ...

  6. Day1-python基础1

    本次学习内容 Python介绍 发展史 版本选择 install 第一个程序hello world 字符编码及注释 变量 用户输入 表达式if...else 一.Python介绍 1)Python由来 ...

  7. python Windows下的android设备截图工具

    目录 界面版 命令行版 界面版 利用python的wx库写个ui界面,用来把android设备的截图输出到电脑屏幕,前提需要安装adb,涉及到的python库也要安装.代码如下: #!/usr/bin ...

  8. JVM Management API

    JVM本身提供了一组管理的API,通过该API,我们可以获取得到JVM内部主要运行信息,包括内存各代的数据.JVM当前所有线程及其栈相关信 息等等.各种JDK自带的剖析工具,包括jps.jstack. ...

  9. SQL SERVER几种数据迁移/导出导入的实践

    SQLServer提供了多种数据导出导入的工具和方法,在此,分享我实践的经验(只涉及数据库与Excel.数据库与文本文件.数据库与数据库之间的导出导入). (一)数据库与Excel 方法1: 使用数据 ...

  10. jquery选择器(总结)

    基本选择器 选择器 描述 示例 #id 根据给定的ID匹配一个元素 $("#id")   .class 根据制定的class匹配一个元素 $(".class") ...