Y-SLD/assets/playkit/plugins/select2/docs/_includes/examples/programmatic-control.html

156 lines
5.0 KiB
HTML

<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>