Test manual select change

by vaiism

HTML

<form name="myForm">
    <h4>Select Me</h4>
    <input type="text" value="Use me to tab over..."/>
    <select id="mySelect" name="mySelect">
        <option value="1">One</option>
        <option value="2">Two</option>
        <option value="3">Three</option>
        <option value="4">Four</option>
        <option value="5">Five</option>
        <option value="6">Six</option>
        <option value="7">Seven</option>
        <option value="8">Eight</option>
        <option value="9">Nine</option>
        <option value="10">Ten</option>
    </select>
</form>
<div id="numberOfSelects"></div>

CSS

body {
    font-family: sans-serif;
}

#numberOfSelects {
    margin-top: 10px; padding: 4px;
    width: 75%;height:30px;
    border: solid 1pt black;
    text-align: right;
}

JavaScript

$(document).ready(function() {
    $('body').delegate('#mySelect', 'change', function() {
        var text = "Selected: " + $('#mySelect').val() + ". Number of selects: " + ++numberSelected;
        $('#numberOfSelects').text(text);
    });
    
    $('#numberOfSelects').text("No selections yet...");
});

// How many have been selected
var numberSelected = 0;