-
Notifications
You must be signed in to change notification settings - Fork 0
/
form-绑定爱好.html
87 lines (74 loc) · 2.95 KB
/
form-绑定爱好.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<form action="">
<label>姓名：</label><input type="text" data-bind="value:Name"/><br />
<label for="">邮箱：</label><input type="text" data-bind="value:Email"/><br />
<label for="">地址：</label>
<select data-bind="options:CityList,optionsText:'name',optionsValue:'Code',value:City,optionsCaption:'请选择'"></select>
<select data-bind="options:currentArea,optionsText:'name',optionsValue:'Code',value:Area,optionsCaption:'请选择区县'">
</select>
<input type="submit" value="提交" />
</form>
<h3>options:CityList是绑定哪一个列表，是一个数组;optionsText:name,是下拉的值，要显示的是什么，这里要为name加单引号，表示是字符串，而非属性</h3>
<h3>optionsValue:'Code'就是options的属性value</h3>
<h3>value:city 这个表示 你选中一个选项后，我们将这个值绑定到city这个上 也就是你要获取当前的数据</h3>
<h3>optionsCaption: 这就表示默认值了，很好理解</h3>
<div>
<label for="">爱好：</label>
<select multiple="multiple" data-bind="options:Hobbies,selectedOptions:MyHobbies">
</select>
</div>
测试下，我们选中的是否已经绑定到MyHobbies上<b data-bind="text:MyHobbies"></b>
</body>
<script src="js/jquery.min.js"></script>
<script src="js/knockout.js"></script>
<script>
$(function() {
var viewModel = function() {
var self = this;
// 英文的提示信息 默认提示信息 这里是不能为空的
self.Name = ko.observable("");
// 自定义中文提示信息
self.Email = ko.observable("");
// 保存的是当前选中的市
self.City = ko.observable("");
// 保存的是当前选中的区
self.Area = ko.observable("");
self.CityList = ko.observableArray([
{name:"A市",Code:"1001"},
{name:"B市",Code:"1002"}
]);
self.AreaList = ko.observableArray([
{name:"A市1区",Code:"1001001",CityCode:"1001"},
{name:"A市2区",Code:"1001002",CityCode:"1001"},
{name:"A市3区",Code:"1001003",CityCode:"1001"},
{name:"B市1区",Code:"1002001",CityCode:"1002"},
{name:"B市2区",Code:"1003002",CityCode:"1002"},
{name:"B市3区",Code:"1004003",CityCode:"1002"}
]);
//上面是所有的区 这是不合适的
self.currentArea = ko.computed(function(){
// 使用KO提供的过滤方法
return ko.utils.arrayFilter(self.AreaList(),function(area){
return area.CityCode == self.City();
});
},self);
// 绑定爱好
self.Hobbies = ko.observableArray([
"游泳",
"听音乐",
"打篮球",
"吃饭"
]);
self.MyHobbies = ko.observable("");
}
var currentVeiwModel = new viewModel();
ko.applyBindings(currentVeiwModel);
});
</script>
</html>