KnockoutJS Select 标签 Options绑定

最新推荐文章于 2020-11-25 20:39:08 发布

weixin_30736301

最新推荐文章于 2020-11-25 20:39:08 发布

阅读量282

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/donchen/p/4816602.html

版权

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

转载于:https://www.cnblogs.com/donchen/p/4816602.html

weixin_30736301

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
KnockoutJS Select 标签 Options绑定

<!DOCTYPE html> <html><head> <meta charset="utf-8" /> <title>select</title> <script src="jquery-1.10.2.min.js"></script> ...
复制链接

扫一扫