<!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. Jmeter_RabbitMQ性能测试

    [前言] RabbitMQ消息的传递并非使用HTTP协议,而是AMQP协议,因此除非开发暴露一个HTTP请求接口出来,否则无法直接使用HTTP请求发送json串数据,实现数据publish到MQ中. ...

  2. P5277 【模板】多项式开根（加强版）（bsgs or Cipolla）

    题面 传送门 题解 首先你得会多项式开根->这里 其次你得会解形如 \[x^2\equiv a \pmod{p}\] 的方程 这里有两种方法,一个是\(bsgs\)(这里),还有一种是\(Cip ...

  3. mxonline实战7，模板继承和模板标签

        对应github地址:https://github.com/pshyms/django/tree/master/mxonline/7_day     一. 定制不同页面中样式相同,内容不同的模 ...

  4. SAE实践——创建简单留言板

    1. 创建数据库 将mysaeapptest的数据库初始化之后,建立新的数据库,在PHPMyAdmin输入下列SQL. CREATE TABLE IF NOT EXISTS `ny_diary` ( ...

  5. Python基础部分的疑惑解析（2）

    变量: 变量名由 字母.数字.下划线构成,数字不能做为开头 不能用关键字:另外一些内置的方法也别用 推荐使用下划线命名间两个单词user_id 变量在最后底层处理的时候没什么意义,但是在命名的时候有利 ...

  6. python模块之 fabric

    Python模块之Fabric   Fabric简介 Fabric是一个Python库,可以通过SSH在多个host上批量执行任务.你可以编写任务脚本,然后通过Fabric在本地就可以使用SSH在大量 ...

  7. 汉诺塔的python 动画演示

    1.简介 古代有一座汉诺塔,塔内有3个座A.B.C,A座上有n个盘子,盘子大小不等,大的在下,小的在上,如图所示.有一个和尚想把这n个盘子从A座移到C座,但每次只能移动一个盘子,并且自移动过程中,3个 ...

  8. js 多个异步 的并发控制

    今天在群里看到一个人发的面试题: 1,请实现如下的函数,可以批量请求数据,所有的URL地址在urls参数中,同时可以通过max参数 控制请求的并发度.当所有的请求结束后,需要执行callback回调. ...

  9. mysql grant权限总结

    2019-01-07 转自 https://blog.csdn.net/wulantian/article/details/38230635 一．权限表 mysql数据库中的3个权限表:user .d ...

  10. apk反编译——基础是内功，得牢，飞跃还得多看源码，不同思想的碰撞才能产生火花，加油！！！！！！！！

    1.获取java源代码 1.1 dex2jar&jd-gui dex2jar:将apk反编译成class文件(classes.dex转化成jar文件) jd-gui:查看APK中classes ...