<!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. Android / iOS 招聘

    1. 面试题 https://github.com/ChenYilong/iOSInterviewQuestions 2. 一些不错的idea CDI - Développeur iOS/Androi ...

  2. Java - io输入输出流 --转换流

    转换流  转换输出流 OutputStreamWriter: 说明: /* * OutputStreamWriter 这个类的作用 * 就是指定输出流的编码格式 * 这个类的构造方法 需要传递 一个输 ...

  3. 2018 ACM-ICPC 亚洲区域赛青岛现场赛 —— Problem F. Tournament

    题面:http://acm.zju.edu.cn/contest-materials/qd2018/qd2018_problems.pdf 题意: n个骑士决斗K轮 要求是每个骑士只能跟另外一个骑士决 ...

  4. robot framework学习笔记之九-杂记

    Setup和Teardown 假设Suite1下面有Test1和Test2,若它们都设置了Setup和Teardown,那么它们的执行顺序是:Suite1-Setup->Test1-Setup- ...

  5. scrapy实战2，使用内置的xpath，re和css提取值

      以伯乐在线文章为爬取目标blog.jobbole.com,发现在"最新文章"选项中可看到所有文章   一般来说,可以用scrapy中自带的xpath或者css来提取数据,定义在 ...

  6. 挂载U盘到linux中

        一.  挂载U盘到linux中,也可以是虚拟机中的linux 1. 首先插上U盘 2. fdisk -l 找到自己的U盘设备,并且记住文件系统类型,主要看空间大小来判断,比如是/dev/sdc ...

  7. extjs Tree中避免连续单击会连续请求服务器

    应用场景:在项目中我要做一个左边是tree,右边是panel的界面.当我单击tree中的一条记录时,发送请求,并将结果显示在右边的panel中.做完之后发现,如果连续单击就会连续请求两次服务器,毕竟用 ...

  8. 关于找不到stdafx.h头文件问题(pass)

    代码: #include "stdafx.h" #include "stdlib.h" char* getcharBuffer() { return " ...

  9. Eclipse署动态web项目方法

    和MyEclipse不一样,在Eclipse中做的Web项目默认是不支持将项目发布到Web服务器上的,会发布到工作空间的某个目录,因此无法在外部启动Tomcat来运行Web项目,只有打开Eclipse ...

  10. git 命令摘录

    回滚 n 个 commit (增加了revert commit) git revert -n commit_id 回滚到指定的commit_id(不增加commit,回滚的commit_id被删除) ...