<!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. python网络编程--FTP上传文件示例

    1.基础版(供学习了解原理使用,low) server服务端 import socket import struct import json server = socket.socket() ip_p ...

  2. Python Pymongo中Connection()与MongoClient()差异

    在git找了几个blog的源码,在学习的过程中,发现有人使用Connection(),有人却在使用MongoClient(),那么到底两者有什么差别呢? 且看分析如下: db = Connection ...

  3. [javascript]——移动端 HTML5 图片上传预览和压缩

    在开发移动端web网页中,我们不可避免的会遇到文件上传的功能,但由于手机图片尺寸太大,上传时间过长导致用户体验太差,就需要在上传前对图片进行一定的压缩. 在代码之前,有必要先了解我们即将使用到的几个A ...

  4. jmeter 之 BeanShell PostProcessor跨线程全局变量使用

    BeanShell PostProcessor是用户对一些变量的操作,操作方法很灵活,大概原理是通过parameters传回来对象,然后在script中对对象进行操作 场景:从登陆接口中获取token ...

  5. Gym-101873D-Pants On Fire（闭包）

    原题链接:2017-2018 ACM-ICPC German Collegiate Programming Contest (GCPC 2017) Pants On Fire Donald and M ...

  6. 嵌入式C语言自我修养 05：零长度数组

    5.1 什么是零长度数组 顾名思义,零长度数组就是长度为0的数组. ANSI C 标准规定:定义一个数组时,数组的长度必须是一个常数,即数组的长度在编译的时候是确定的.在ANSI C 中定义一个数组的 ...

  7. (转)zabbix之生产案例

    原文: https://www.abcdocker.com/abcdocker/category/zabbix/ 原文: https://chegva.com/1170.html

  8. 【系统】Ubuntu和win7双系统更改系统引导菜单

    1. 下载EasyBCD 2. 编辑菜单选项以及重写MBR

  9. hibernate配置hbm2ddl.auto的四个参数

    <!-- Drop and re-create the database schema on startup --> <!-- hbm(hibernatemapping) ,ddl( ...

  10. django notes 四: Writing views

    views 其实没什么可看的, 在  django  中 views 就是 controller, 是处理请求的, 就是一个普通的 python 方法. 一般从 request 中提取请求参数, 然后 ...