Question

When I put the following code within the $(document).ready(function () {} it executes correctly.

                $('#welcome select').change(function () {
                var stateSelected = $('option:selected', this).val();

                setCookie('ia_state', stateSelected);

                switch (stateSelected) {
                    case 'Virginia':
                        window.location = '/Login/VA';
                        break;
                    case 'North Carolina':
                        window.location = '/Login/NC';
                        break;
                    case 'South Carolina':
                        window.location = '/Login/SC';
                        break;
                    default:
                        window.location = 'http://www.mysite.com/pages/login/login.html';
                }
            });

However, I need to place this code elsewhere on the page in order to make it easily accessible by the user.

I have placed the code by the select element that the user will have access to like so:

<script language="javascript" type="text/javascript">


$('#welcome select').change(function () {
                var stateSelected = $('option:selected', this).val();

                setCookie('ia_state', stateSelected);

                switch (stateSelected) {
                    case 'Virginia':
                        window.location = '/Login/VA';
                        break;
                    case 'North Carolina':
                        window.location = '/Login/NC';
                        break;
                    case 'South Carolina':
                        window.location = '/Login/SC';
                        break;
                    default:
                        window.location = 'http://www.mysite.com/pages/login/login.html';
                }
            });




</script>
<div class="clear" id="welcome">
<p class="message">
    Welcome!</p>
<p class="switch-state">
    Switch State</p>
<select id="state-select" size="1"><option selected="selected" value="Virginia">VA</option><option value="North Carolina">NC</option><option value="South Carolina">SC</option><option value="Alabama">AL</option><option value="Alaska">AK</option><option value="Arizona">AZ</option><option value="Arkansas">AR</option><option value="California">CA</option><option value="Colorado">CO</option><option value="Connecticut">CT</option><option value="Delaware">DE</option><option value="Florida">FL</option><option value="Georgia">GA</option><option value="Hawaii">HI</option><option value="Idaho">ID</option><option value="Illinois">IL</option><option value="Indiana">IN</option><option value="Iowa">IA</option><option value="Kansas">KS</option><option value="Kentucky">KY</option><option value="Louisiana">LA</option><option value="Maine">ME</option><option value="Maryland">MD</option><option value="Massachusetts">MA</option><option value="Michigan">MI</option><option value="Minnesota">MN</option><option value="Mississippi">MS</option><option value="Missouri">MO</option><option value="Montana">MT</option><option value="Nebraska">NE</option><option value="Nevada">NV</option><option value="New Hampshire">NH</option><option value="New Jersey">NJ</option><option value="New Mexico">NM</option><option value="New York">NY</option><option value="North Dakota">ND</option><option value="Ohio">OH</option><option value="Oklahoma">OK</option><option value="Oregon">OR</option><option value="Pennsylvania">PA</option><option value="Rhode Island">RI</option><option value="South Dakota">SD</option><option value="Tennessee">TN</option><option value="Texas">TX</option><option value="Utah">UT</option><option value="Vermont">VT</option><option value="Washington">WA</option><option value="West Virginia">WV</option><option value="Wisconsin">WI</option><option value="Wyoming">WY</option><!-- 
                        <option value="North Carolina">NC</option>
                        <option selected="selected" value="Virginia">VA</option>
                     --></select></div>

However, this code does not run when value of the select element is changed on the page. What am I doing wrong?

---

Edit:

I have placed the javascript after the div element “welcome” and I also have it within a $(document).ready(function () {} function.

The function is now being hit the very first time the page loads. However, it is not being called when the value of the select element is changed. It is as if the event is not hooked up to the handler now.

Answer 1

Put the script after the “welcome” <div>, not before it.

Scripts are run when they’re “seen” by the HTML parser. Thus, your script runs before the “welcome” <div> is part of the DOM, so the selector comes up empty. If you put your script after it, however, it should work. (At least, the selector will find what it’s looking for.)