Question

当我将以下代码放在$（document）.ready（function（）{}中时，它会正确执行。

                $('#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';
                }
            });

但是，我需要将此代码放在页面的其他位置，以便用户可以轻松访问。

我已经按照用户可以访问的select元素放置了代码，如下所示：

<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>

但是，当在页面上更改select元素的值时，此代码不会运行。我做错了什么？

编辑：

我在div元素“welcome”之后放置了javascript，并且我在$（document）.ready（function（）{}函数中也有它。

该功能现在在页面加载时首次出现。但是，当select元素的值发生更改时，不会调用它。就好像事件现在没有连接到处理程序一样。

Answer 1

将脚本放在“欢迎”<div>之后，而不是之前。

脚本在HTML解析器“看到”时运行。因此，您的脚本在“welcome”<div>是DOM的一部分之前运行，因此选择器变为空。但是，如果你把脚本放在它之后，它应该可以工作。（至少，选择器会找到它正在寻找的东西。）

Answer 2

它需要在文档就绪函数中或在它引用的内容之后。您的页面中可以有多个$(document).ready(function() {});。

选择元素的更改事件函数不执行

2 个答案: