jQuery.SimpleSelect demo #4

Watching the change event

HTML

<script src="http://pioul.fr/ext/jquery-simpleselect/jquery.simpleselect.2.0.0.min.js"></script>
<link rel="stylesheet" href="http://pioul.fr/ext/jquery-simpleselect/jquery.simpleselect.2.0.0.min.css">
<div>
    <label for="example-select">What's your favorite cat breed?</label>
    <select id="example-select">
        <option>Persian</option>
        <option>Maine Coon</option>
        <option>Exotic</option>
        <option>Siamese</option>
        <option>Abyssinian</option>
        <option>Ragdoll</option>
        <option>Birman</option>
        <option>American Shorthair</option>
        <option>Oriental</option>
        <option>Sphynx</option>
    </select>
</div>

<div class="answer">
    Answer: <span id="cat-breed-display"><i>Select a breed</i></span>
</div>

CSS

body {
	padding: 10px;
	margin: 0;
	background: #fff;
	font: 14px Arial, Helvetica, Geneva, sans-serif;
	line-height: 1.5em;
	color: #3a3a3a;
}

body > div {
	float: left;
	margin: 40px 40px 0 0;
}

.simpleselect .placeholder {
  display:block !important;
  height:auto !important;
  padding:40px !important;
}
.answer {
	padding-top: 29px;
}

.answer #cat-breed-display {
	font-weight: bold;
}

label {
	display: block;
}

JavaScript

var select = $("#example-select"),
    catBreedDisplay = $("#cat-breed-display");

select
    .simpleselect()
    .on("change", function() {
        catBreedDisplay.text(select.val());
    });