zoukankan      html  css  js  c++  java
  • kojs select绑值(工作)

    <!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事件需要执行的方法
    =============================================================




  • 相关阅读:
    my15_ mysql binlog格式从mixed修改为row格式
    my14_mysql指定时间恢复之模拟从库
    my13_mysql xtrabackup备份的时间点
    必知必会的图论算法
    leetcde37. Sudoku Solver
    leetcode36. Valid Sudoku
    leetcode52. N-Queens II
    leetcode51. N-Queens
    First Missing Positive
    Maximum Gap
  • 原文地址:https://www.cnblogs.com/lbonet/p/6860927.html
Copyright © 2011-2022 走看看