<!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. jQuery--基本介绍与下载

    本篇内容: 1.jquery学习内容 2.jquery下载,引用 3.使用顺序 4.版本 5.jquery对象与DOM对象转化 jQuery认识: jQuery学习内容 选择器 筛选器 样式操作 文本 ...

  2. SQL语句优化 (一) （52）

    优化SQL语句的一般步骤 1 通过show status命令了解各种SQL的执行频率. 格式:mysql> show [session|global]status; 其中:session(默认) ...

  3. Java多线程原理及Thread类的使用

    一.进程与线程的区别 1.进程是应用程序在内存总分配的空间.(正在运行中的程序) 2.线程是进程中负责程序执行的执行单元.执行路径. 3.一个进程中至少有一个线程在负责进程的运行. 4.一个进程中有多 ...

  4. sqli-labs lession 5 之盲注型SQL入门

    本文作者:Mochazz 如果所查询的用户id在数据库中,可以发现页面显示”You are in”,而不像前4关那样会显示出具体的账号密码. 如果sql语句查询结果不存在,则不会显示”You are ...

  5. python random 之基础点名器

    import os ,sysimport randomcalled =set() # 创建一个空集合f =open('name.txt ' , 'r')#打开文件读取名字data =f.read()# ...

  6. Spring中applicationContext.xml详解

    <?xml version="1.0" encoding="UTF-8"?> <beans xmlns="http://www.sp ...

  7. 原 form 表单中 disabled 属性的元素不参与表单提交

    https://blog.csdn.net/benben683280/article/details/79173336

  8. jenkins+appium android app自动化测试

    jenkins安装 pytest+jenkins安装+allure报告 新建任务 其他默认,保存 立即构建 test_login.py from src.pages import login_page ...

  9. 用Jquery获取Url的参数

    在网上找的一个办法 //先写一个方法 function GetUrlString(name) { var reg = new RegExp("(^|&)"+ name +& ...

  10. jedis 连接redis

    一,  单机版连接 @Test public void testJedis() { //1. 创建jedis 对象 Jedis jedis = new Jedis("192.168.88.1 ...