Javascript 未捕获类型错误：无法设置属性'；onchange'；空的

我使用下拉菜单动态更改页面上的内容。它可以工作，但只在Chrome中抛出js错误。Chrome的建议我不知道如何实现。该场地建在ExpressionEngine 2.8.1中

CHROME中的错误消息

未捕获类型错误：无法设置空函数的属性“onchange”。js:65
event.returnValue已弃用。请改用标准的event.preventDefault（）

我的JS代码

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

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

我的HTML代码

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

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

选择一个位置：
{exp:channel:entries channel=“locations”category=“not 3”orderby=“title”sort=“asc”dynamic=“no”}
{title}
{/exp:channel:entries}

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

该错误消息只有一个可能的原因，

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>

选择一个位置：{exp:channel:entries channel=“locations”category=“not 3”orderby=“title”sort=“asc”dynamic=“no”}
{title}{/exp:channel:entries}
document.getElementById（“drop”）.onchange=function（）{
if（this.selectedIndex！==0）{
window.location.href=this.value；
}
};

使用文档就绪事件

$(document).ready(function(){

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

});

---

在Chrome中运行良好，您正在运行哪个版本？我在一个小时内完成了这项工作，效果很好。你能提供一些关于JS的更多信息吗？该脚本是否直接在HTML中？是有更多的JS还是只有这一行？您确定您的Chrome稳定吗？看起来您正在jQuery eventhandler中执行此代码，

$（document）.ready（）

可能？如果代码真的在其他浏览器中工作，那么您的模板可能会在Chrome中损坏。在尝试将事件处理程序设置为

select

之前，可以检查

表单的
innerHTML
。你能看到select标签和它的id吗？很可能是浏览器的问题。了解vanilla js访问dom非常好，但是如果您想要可靠性，请使用JQuery选择适当的元素。与Adeneo posted一样，唯一的解释是document.getElementById调用没有选择元素。如果没有其他信息，就无法回答。我的函数文件中有js代码。我会按你的方式试一下，看看我是否仍然会出错。谢谢你在这方面的帮助。这很有效：）非常感谢你的帮助。。。大家也一样。