programmatic-control.html
4.98 KB
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
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
<section>
<h1 id="programmatic-control" class="page-header">
Programmatic control
</h1>
<h2 id="events">DOM events</h2>
<p>
Select2 will trigger some events on the original select element,
allowing you to integrate it with other components. You can find more
information on events
<a href="options.html#events">on the options page</a>.
</p>
<p>
<code>change</code> is fired whenever an option is selected or removed.
</p>
<p>
<code>select2:open</code> is fired whenever the dropdown is opened.
<code>select2:opening</code> is fired before this and can be prevented.
</p>
<p>
<code>select2:close</code> is fired whenever the dropdown is closed.
<code>select2:closing</code> is fired before this and can be prevented.
</p>
<p>
<code>select2:select</code> is fired whenever a result is selected.
<code>select2:selecting</code> is fired before this and can be prevented.
</p>
<p>
<code>select2:unselect</code> is fired whenever a result is unselected.
<code>select2:unselecting</code> is fired before this and can be prevented.
</p>
<div class="s2-example">
<p>
<select class="js-states js-example-events form-control"></select>
</p>
<p>
<select class="js-states js-example-events form-control" multiple="multiple"></select>
</p>
</div>
<div class="s2-event-log">
<ul class="js-event-log"></ul>
</div>
<pre data-fill-from=".js-code-events"></pre>
<script type="text/javascript" class="js-code-events">
var $eventLog = $(".js-event-log");
var $eventSelect = $(".js-example-events");
$eventSelect.on("select2:open", function (e) { log("select2:open", e); });
$eventSelect.on("select2:close", function (e) { log("select2:close", e); });
$eventSelect.on("select2:select", function (e) { log("select2:select", e); });
$eventSelect.on("select2:unselect", function (e) { log("select2:unselect", e); });
$eventSelect.on("change", function (e) { log("change"); });
function log (name, evt) {
if (!evt) {
var args = "{}";
} else {
var args = JSON.stringify(evt.params, function (key, value) {
if (value && value.nodeName) return "[DOM node]";
if (value instanceof $.Event) return "[$.Event]";
return value;
});
}
var $e = $("<li>" + name + " -> " + args + "</li>");
$eventLog.append($e);
$e.animate({ opacity: 1 }, 10000, 'linear', function () {
$e.animate({ opacity: 0 }, 2000, 'linear', function () {
$e.remove();
});
});
}
</script>
<h2 id="programmatic">Programmatic access</h2>
<p>
Select2 supports methods that allow programmatic control of the
component.
</p>
<div class="s2-example">
<p>
<select class="js-example-programmatic js-states form-control"></select>
</p>
<div class="btn-toolbar" role="toolbar" aria-label="Programmatic control">
<div class="btn-group btn-group-sm" aria-label="Set Select2 option">
<button class="js-programmatic-set-val btn btn-default">
Set "California"
</button>
</div>
<div class="btn-group btn-group-sm" role="group" aria-label="Open and close">
<button class="js-programmatic-open btn btn-default">
Open
</button>
<button class="js-programmatic-close btn btn-default">
Close
</button>
</div>
<div class="btn-group btn-group-sm" role="group" aria-label="Initialize and destroy">
<button class="js-programmatic-init btn btn-default">
Init
</button>
<button class="js-programmatic-destroy btn btn-default">
Destroy
</button>
</div>
</div>
<p>
<select class="js-example-programmatic-multi js-states form-control" multiple="multiple"></select>
</p>
<div class="btn-group btn-group-sm" role="group" aria-label="Programmatic setting and clearing Select2 options">
<button type="button" class="js-programmatic-multi-set-val btn btn-default">
Set to California and Alabama
</button>
<button type="button" class="js-programmatic-multi-clear btn btn-default">
Clear
</button>
</div>
</div>
<pre data-fill-from=".js-code-programmatic"></pre>
<script type="text/javascript" class="js-code-programmatic">
var $example = $(".js-example-programmatic").select2();
var $exampleMulti = $(".js-example-programmatic-multi").select2();
$(".js-programmatic-set-val").on("click", function () { $example.val("CA").trigger("change"); });
$(".js-programmatic-open").on("click", function () { $example.select2("open"); });
$(".js-programmatic-close").on("click", function () { $example.select2("close"); });
$(".js-programmatic-init").on("click", function () { $example.select2(); });
$(".js-programmatic-destroy").on("click", function () { $example.select2("destroy"); });
$(".js-programmatic-multi-set-val").on("click", function () { $exampleMulti.val(["CA", "AL"]).trigger("change"); });
$(".js-programmatic-multi-clear").on("click", function () { $exampleMulti.val(null).trigger("change"); });
</script>
</section>