您的位置：首页 > Web前端 > JavaScript

KnockoutJS Select 标签 Options绑定

2015-09-17 15:48 543 查看

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

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航