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