This repository has been archived by the owner on Jan 8, 2023. It is now read-only.
-
Notifications
You must be signed in to change notification settings - Fork 6
/
index.html
105 lines (101 loc) · 2.77 KB
/
index.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
102
103
104
105
<html>
<head>
<link rel="stylesheet" href="./dist/selectmadu.css"/>
<script type="text/javascript" src="./dist/selectmadu.min.js">
</script>
<style>
.select-madu {
margin: 20px;
}
</style>
</head>
<body>
<div id="parent"></div>
<script defer="defer">
var sm = new SelectMadu({
target: document.querySelector("#parent"),
props: {
valueKey: "value",
animate: true,
selectFirstOption: false,
datasource: [
{
text: "Parent Option",
children: [
{ text: "Child 1", value: 1 },
{ text: "Child 2", value: 2 }
]
},
{ text: "Option 2", value: 3 },
{ text: "Option 3", value: 4 },
{
text: "Parent Option",
children: [
{ text: "Child 1", value: 5 },
{
text: "Child 2",
value: 6,
children: [
{ text: "Inner Child 1", value: 6.1 },
{ text: "Inner Child 2", value: 6.2 }
]
}
]
},
{ text: "Option 2", value: 7 },
{ text: "Option 3", value: 8 }
]
}
});
var sm1 = new SelectMadu({
target: document.querySelector("#parent"),
props: {
multiple: true,
textKey: "t1",
valueKey: "value",
datasource: [
{ t1: "A 1", value: "cv1" },
{ t1: "A 2", value: "cv2" },
{ t1: "A 3", value: "cv3" }
]
}
});
var sm2 = new SelectMadu({
target: document.querySelector("#parent"),
props: {
valueKey: "value",
datasource: () => {
return new Promise(function(resolve) {
setTimeout(() => {
resolve([
{
text: "Parent Option",
children: [
{ text: "Child 1", value: 1 },
{ text: "Child 2", value: 2, disabled: true }
]
},
{ text: "Option 2", value: 3 },
{ text: "Option 3", value: 4, disabled: true }
])
}, 600000);
});
}
}
});
var sm3 = new SelectMadu({
target: document.querySelector("#parent"),
props: {
disabled: true,
textKey: "t1",
valueKey: "value",
datasource: [
{ t1: "A 1", value: "cv1" },
{ t1: "A 2", value: "cv2" },
{ t1: "A 3", value: "cv3" }
]
}
});
</script>
</body>
</html>