<Select>’s Change() Event Doesn’t Fire Until Focus is Lost

Using jQuery and Visual Studio, I was attempting to hide/show form elements based on the selection of a <select> element. The code was working fine other than the fact that the <select>’s change() event didn’t appear to fire until the focus was lost from the <select> element (i.e. I clicked the mouse somewhere else other than the <select> tag.

It turns out the the problem was due to how I placed the jQuery package and the Visual Studio Intellisense package. I found out the hard way that if you are going to use the Visual Studio jQuery Intellisense package you must place it in your HTML document BEFORE the jQuery package.

Notice in the HTML document below that the VS Intellisense package (jquery-1.5.1-vsdoc.js) is placed prior to the jQuery package (jquery-1.5.1.min.js). This is good.
It would be bad if you place the jquery-1.5.1-vsdoc.js package after the jquery-1.5.1.min.js. If you misplace the packages, the example below will not work properly when you change the Animal choice. What happens is the change() event doesn’t fire until after you move the focus from the <select> to somewhere else.

<!DOCTYPE html>
<html>
<head>
    <title>Test</title>
</head>
<body>
    <h2>
        Test</h2>
    <script src="/Scripts/jquery-1.5.1-vsdoc.js" type="text/javascript"></script>
    <script src="/Scripts/jquery-1.5.1.min.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            $(".animal-speak").hide();

            $("#Animal").change(function () {
                $(".animal-speak").hide();
                var speaker = $("#Animal").val();
                switch (speaker) {
                    case "dog":
                        $("#bark").show();
                        break;
                    case "cat":
                        $("#meow").show();
                        break;
                    case "bird":
                        $("#chirp").show();
                        break;
                }
            });
        });
    </script>
    <form action="" method="post">
    <select name="Animal" id="Animal">
        <option value="dog">Dog</option>
        <option value="cat">Cat</option>
        <option value="bird">Bird</option>
    </select>
    <div id="bark" class="animal-speak">
        Barking</div>
    <div id="meow" class="animal-speak">
        Meowing</div>
    <div id="chirp" class="animal-speak">
        Chirping</div>
    </form>
</body>
</html>
Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s