Speed up development with full-stack environments for every branch.

Learn More

Events in select2 [jQuery]

25324 Runs 168556 Views 107269 Copies


littlehaker 78

published 4 years ago


    <script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
    <script src="select2.js"></script>

        // display logs
        function log(text) {
          $('#logs').append(text + '<br>');

        .on("change", function(e) {
          // mostly used event, fired to the original element when the value changes
          log("change val=" + e.val);
        .on("select2-opening", function() {
        .on("select2-open", function() {
          // fired to the original element when the dropdown opens
        .on("select2-close", function() {
          // fired to the original element when the dropdown closes
        .on("select2-highlight", function(e) {
          log("highlighted val=" + e.val + " choice=" + e.choice.text);
        .on("select2-selecting", function(e) {
          log("selecting val=" + e.val + " choice=" + e.object.text);
        .on("select2-removed", function(e) {
          log("removed val=" + e.val + " choice=" + e.choice.text);
        .on("select2-loaded", function(e) {
          log("loaded (data property omitted for brevitiy)");
        .on("select2-focus", function(e) {


    <link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css">
    <link rel="stylesheet" href="select2.css">
      body {
        padding: 40px;

    <select style="width: 300px">
        <option value="AK">Alaska</option>
        <option value="HI">Hawaii</option>
        <option value="CA">California</option>
        <option value="NV">Nevada</option>
        <option value="OR">Oregon</option>
        <option value="WA">Washington</option>
        <option value="AZ">Arizona</option>
        <option value="CO">Colorado</option>
        <option value="ID">Idaho</option>
        <option value="MT">Montana</option>
        <option value="NE">Nebraska</option>
        <option value="NM">New Mexico</option>
        <option value="ND">North Dakota</option>
        <option value="UT">Utah</option>
        <option value="WY">Wyoming</option>
    <div class="well" id="logs"></div>

Please login/signup to get access to the terminal.

Your session has timed out.

Dismiss (the page may not function properly).