zoukankan      html  css  js  c++  java
  • KnockoutJS Select 标签 Options绑定

    <!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>
    View Code
    options: peopleList  指定绑定数据有哪个对象来。
    optionsText: 'name' 绑定时显示字段为name
    optionsValue:'id'  绑定时值字段为id
    value: selectedPeople  值保存在哪个对象中
    optionsCaption: '选择人员...' 默认下拉框中的文字
    event: { change: peopleChange}" 指定onchange事件需要执行的方法
  • 相关阅读:
    POI做报表
    (一) DB2的备份和恢复:准备
    西天取经为节约成本该裁掉哪位?
    python中configpraser模块
    python中subprocess模块
    python中os模块
    python中random模块
    python中time模块和datetime模块
    python中序列化json模块和pickle模块
    迭代器生成器函数的递归调用与二分法
  • 原文地址:https://www.cnblogs.com/donchen/p/4816602.html
Copyright © 2011-2022 走看看