Javascript选择下拉菜单onchange未正确触发

Question

我的 onchange 没有正确触发 javascript 方法。

选择代码（在 HTML 文件中）

<select id="crit_1" onchange="crit1Update()">
    <option value=null>Criteria 1</option>
 <option value="major">Major</option>
 <option value="grad">Graduation Year</option>
</select>

crit1Update() 代码（在与包含上述内容的 HTML 文件位于同一文件夹中的外部 filter.js 文件中，HTML 头部包含以下代码

<script type="text/javascript" src="filter.js">
</script>

function crit1Update() {
 var crit1 = document.criteria.getElementsByID("crit1");
 var criteria1 = crit1.options[crit1.selectedIndex].value;
 alert("criteria1"); // this is never firing, so this isnt getting called
 if (criteria1 == null) {
  // eventually set all other lists to null in here as well
  filter(null,null,null,null,null,null)
            // the above returns all the resumes 
            // (this is eventually going to filter resumes)
 }
 else if (criteria1 == "major") {
  alert("Major!");
 }
}

我是否遗漏了任何明显或不明显的错误？我不明白为什么没有调用 alert("criteria1"。我来自 java 背景，这是我第一次涉足 JS，所以我可能会遗漏一些简单的东西。

感谢您的帮助。

Answer 1

这个方法调用有错别字：

document.criteria.getElementsByID(

应该是

document.criteria.getElementById(
                            ^  ^ no "s" and lower case "d"

还要确保 id 与您的 HTML 元素匹配，例如“crit_1”

Answer 2

您的<select> ID 为“crit_1”，您的函数正在查找 ID“crit1”（无下划线）。

将<select> 元素作为对函数的引用可能是一个更好的主意，例如

JavaScript

function crit1Update(crit1) {
    var criteria1 = crit1.options[crit1.selectedIndex].value;

HTML

<select id="crit1" name="crit1" onchange="crit1Update(this)">