alexlondon07/Events in select2 [jQuery]

## Events in select2 [jQuery]
<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>
	<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>