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

Learn More

Events in select2 [jQuery]

24131 Runs 159011 Views 100857 Copies
Saved

Saved

littlehaker 78

littlehaker
published 3 years ago

<html>

  <head>
    <script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
    <script src="select2.js"></script>
    <script>
      $(function(){

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

        $('select').select2()
        .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() {
          log("opening");
        })
        .on("select2-open", function() {
          // fired to the original element when the dropdown opens
          log("open");
        })
        .on("select2-close", function() {
          // fired to the original element when the dropdown closes
          log("close");
        })
        .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) {
          log("focus");
        });

      });
    </script>

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

  <body>
    <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>
    </select>
    <br>
    <br>
    <div class="well" id="logs"></div>
  </body>

</html>
Please login/signup to get access to the terminal.

Your session has timed out.

Dismiss (the page may not function properly).