-
Notifications
You must be signed in to change notification settings - Fork 5
/
demo.html
101 lines (98 loc) · 2.56 KB
/
demo.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
88
89
90
91
92
93
94
95
96
97
98
99
100
101
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=`, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="./style.css">
</head>
<body>
<button id="getCheckedByText">获取所有选择的文本</button>
<button id="getCheckedByID">获取所有选择的ID</button>
<div id="cascader-wrap" class="cascader-wrap"></div>
</body>
</html>
<script src="./cascader.js"></script>
<script>
var tags = [
{
id: 1,
label: '中部',
children: [
{
id: 2,
label: '山西',
children: [
{
id: 3,
label: '太原',
children: [
{
id: 31,
label: '小店区'
},
{
id: 32,
label: '迎泽区'
},
{
id: 33,
label: '晋源区'
}
]
},
{ id: 4, label: '吕梁' }
]
},
{
id: 5,
label: '北京',
children: [
{ id: 6, label: '通州区' },
{ id: 7, label: '海淀区' }
]
}
]
},
{
id: 8,
label: '西北',
children: [
{
id: 9,
label: '陕西',
children: [
{ id: 10, label: '西安' },
{ id: 11, label: '延安' },
{ id: 21, label: '榆林' }
]
},
{
id: 12,
label: '新疆维吾尔族自治区',
children: [
{ id: 13, label: '乌鲁木齐' },
{ id: 14, label: '克拉玛依' }
]
}
]
}
]
// 获取选中的文本
document.getElementById('getCheckedByText').onclick = function() {
alert('选中的文本为 \n\n' + cascader.getCheckedByText().join(',').replace(/,/g, '\n'))
}
// 获取选中的ID
document.getElementById('getCheckedByID').onclick = function() {
alert('选中的ID为 \n\n' + cascader.getCheckedByID().join(',').replace(/,/g, '\n'))
}
var cascader = new eo_cascader(tags, {
elementID: 'cascader-wrap',
multiple: true, // 是否多选
// 非编辑页，checkedValue 传入 null
// 编辑时 checkedValue 传入最后一级的 ID 即可
checkedValue: [4, 7, 10, 11, 21, 31, 33] || null,
separator: '-', // 分割符 山西-太原-小店区 || 山西/太原/小店区
clearable: true // 是否可一键删除已选
})
</script>