Question

我正在使用下拉列表来动态更改页面上的内容。它工作但只在Chrome中抛出一个js错误。 Chrome建议我不知道如何实施。 Site是在ExpressionEngine 2.8.1中构建的。

CHROME中的错误信息

未捕获的TypeError：无法设置属性＆＃39; onchange＆＃39; of null functions.js：65
不推荐使用event.returnValue。请改用标准的event.preventDefault（）。

我的JS代码

document.getElementById("drop").onchange = function() {
    if (this.selectedIndex!==0) {
        window.location.href = this.value;
    }        
};

我的HTML代码

            <form method="post" action="{path='locations/index'}" class="drop">
                <select id="drop">
                    <option>Select a Location:</option>
                {exp:channel:entries channel="locations" category="not 3" orderby="title" sort="asc" dynamic="no"}
                    <option value="{site_url}index.php/locations/{url_title}">{title}</option>
                {/exp:channel:entries}
                </select>
            </form>

Answer 1

该错误消息只有一个可能的原因，document.getElementById("drop")不返回该元素，唯一的原因是该元素不存在，但在HTML中它很明显，所以脚本必须在DOM中的元素之前运行。

你必须在DOM中的元素之后包含javascript，或者将它包装在DOM就绪处理程序中，例如window.onload等。

<form method="post" action="{path='locations/index'}" class="drop">
    <select id="drop">
        <option>Select a Location:</option>{exp:channel:entries channel="locations" category="not 3" orderby="title" sort="asc" dynamic="no"}
        <option value="{site_url}index.php/locations/{url_title}">{title}</option>{/exp:channel:entries}
    </select>
</form>
<script>
    document.getElementById("drop").onchange = function() {
        if (this.selectedIndex !== 0) {
            window.location.href = this.value;
        }
    };
</script>

Answer 2

在呈现HTML之前，您正在运行JavaScript代码。

Answer 3

使用文档就绪活动

$(document).ready(function(){

 $('#drop').change(function(){ 
    if (this.selectedIndex !== 0) {
        window.location.href = this.value;
    }
 })

});

未捕获的TypeError：无法设置属性＆＃39; onchange＆＃39;为null

3 个答案: