<!DOCTYPE html>

<html>

<head>  <meta charset="utf-8" />

    <title>select</title>

        <script src="jquery-1.10.2.min.js"></script>

   <script type="text/javascript" src="knockout-3.2.0.js"></script>

    <script>

        function MyViewModel()

        {

            var self = this;  //用self替代this

            self.peopleList = ko.observableArray([

    { name: "张三", id: "1" },

    { name: "李四", id: "2" },

    { name: "王五", id: "3" }

]); //监控数组

            self.selectedPeople=ko.observable(0); //记录已选中的人员值

            self.peopleChange=function() //选择某个选项后的事件。

            {

                alert(self.selectedPeople());

            }

        }

        $(function () {

            ko.applyBindings(new MyViewModel());

        });

    </script>

</head>

<body>

<div>

<select  data-bind="options: peopleList,

　　　　　　　　　　　　　　optionsText: 'name', optionsValue:'id',value: selectedPeople, optionsCaption: '选择人员...',event: { change: peopleChange}">

    </select>

</div>

</body>

</html>
options: peopleList  指定绑定数据有哪个对象来。

optionsText: 'name' 绑定时显示字段为name

optionsValue:'id'  绑定时值字段为id

value: selectedPeople  值保存在哪个对象中

optionsCaption: '选择人员...' 默认下拉框中的文字

event: { change: peopleChange}" 指定onchange事件需要执行的方法

KnockoutJS Select 标签 Options绑定的更多相关文章

  1. KnockoutJS 3.X API 第四章 表单绑定(11) options绑定

    目的 options绑定主要用于下拉列表中(即<select>元素)或多选列表(例如,<select size='6'>).此绑定不能与除<select>元素之外的 ...

  2. c# select标签绑定枚举,并以Description做Text显示

    今天在做项目时遇到一个问题: 开发中有些字段是枚举类型如 Dept 企业表中可能有个字段 Property 性质 0:事业单位,1:私企,2:外企,但有时我们不会单独为性质这个字段定义一张表, 而是在 ...

  3. form:select form:options 标签数据回显

    在jsp页面中经常会使用到 form:select form:options 遍历后台List集合生成 select 下拉选择器,但是 form:options 标签并没有提供一个可以回显数据的属性. ...

  4. 2017年3月25日工作日志：Jquery使用小结[绑定事件判断、select标签、军官证正则]

    jQuery获取DOM绑定事件 在1.8.0版本之前,我们要想获取某个DOM绑定的事件处理程序可以这样: $.data(domObj,'events');//或者$('selector').data( ...

  5. jQ给下拉框绑定事件，为什么要绑定在框(select标签)上，而不是绑定在选项(option标签)上

    这是我在学习锋利的 jquery 书中 5.1.4 的代码时遇到的一个小问题,源代码如下: <head> <style type="text/css"> * ...

  6. html中select标签根据枚举获得值的总结

    不知不觉在公司一个多月了,这一个月做了一个支票申请的web页面功能,都不是特别难,审核有公司给的工作流,分页工具和很多公用工具公司也都给了,所以觉得难度都不是很大.今天主管让我们修改了以前做的项目的代 ...

  7. 获取select标签选中状态 的label的值。

    <select name="procode" onchange="alert(this.options[this.selectedIndex].text)" ...

  8. Knockoutjs 实践入门 (3) 绑定数组

    <form id="form1" runat="server">        <div>            <!--text ...

  9. selenium处理select标签的下拉框

    有时候我们会碰到<select></select>标签的下拉框.直接点击下拉框中的选项不一定可行.Selenium专门提供了Select类来处理下拉框. <select  ...

随机推荐

  1. 注意力机制（Attention Mechanism）应用——自然语言处理（NLP）

    近年来,深度学习的研究越来越深入,在各个领域也都获得了不少突破性的进展.基于注意力(attention)机制的神经网络成为了最近神经网络研究的一个热点,下面是一些基于attention机制的神经网络在 ...

  2. [转] LVM分区在线扩容

    [转] LVM分区在线扩容 在线扩容的这台服务器,LV分区格式为xfs,原大小1.2TB.增加了一块硬盘,大小为1.8TB. fdisk /dev/cciss/c0d1 # 创建分区,并指定分区类型为 ...

  3. re 模块 常规方法使用

    前情提要: re模块主要用于正则,用的好了秒杀一切匹配的规则,这里主要是介绍基本用法 一:元字符 1:\w 匹配字符,包含中文,数字或下划线 l ='早乙女露依 123 是我的 321 心目中的 22 ...

  4. 10分钟教你用Python打造微信天气预报机器人

    01 前言 最近武汉的天气越来越恶劣了.动不动就下雨,所以,拥有一款好的天气预报工具,对于我们大学生来说,还真是挺重要的了.好了,自己动手,丰衣足食,我们来用Python打造一个天气预报的微信机器人吧 ...

  5. python中的类方法、静态方法、对象方法

    注:以下都是以公有为前提,私有方法只能在类内部调用,不需多讲. 1.对象方法 这种方法都有一个默认参数:self  这代表实例的这个对象 def __init__(self): print(" ...

  6. Xcode升级到9.3之后pod问题

    最近新建了一个项目,然后在终端pod init的时候出现了问题,复制粘贴部分错误信息 MacBook-Pro:testDemo xywy$ pod init [in /Users/xywy/Deskt ...

  7. flask _bootstrap中使用flash

    在模板中获取flash闪现的那段代码要和内容块放在同一级别上.不然网页上是看不到闪现的内容的. 比如在基模板里定义一个content block ,里面一个是get_flashed_messages代 ...

  8. C++类的构造函数及定义

    定义一个普通的类时,一定要定义它自己的构造函数.原因有三:第一个原因是编译器只有在发现类不包含任何构造函数的情况下才会替我们生成一个默认的构造函数,一旦我们定义了一些其他的构造函数,那么除非我们再定义 ...

  9. Ubuntu 16.04防火墙

    防火墙(ufw) 说明:简单版本的防火墙,底层依赖于iptables. 安装:sudo apt-get install ufw 查看状态:sudo ufw status 开启/关闭:sudo ufw ...

  10. Zynq-7000 FreeRTOS(二)中断：Timer中断

    总结Zynq-7000 这款器件中的Timer定时器中断,为FreeRTOS中断做准备.在 ZYNQ 的纯 PS 里实现私有定时器中断. 每隔一秒中断一次, 在中断函数里计数加 1, 通过串口打印输出 ...