javascript - 错误无法获取未定义或空引用的属性 'options'

Question

  function Validate() {
        for (var i = 0; i < 2; i++) {
            var objCat = document.getElementById("ddlCategories" + i);
                if (objCat.options[objCat.selectedIndex].text != "--SET--") {
                    for (var j = i + 1; j < 6; j++) {
                        var objCatNext = document.getElementById("ddlCategories" + j);
                        if (objCat.options[objCat.selectedIndex].text == objCatNext.options[objCatNext.selectedIndex].text) {
                            spnMessage.innerHTML = objCatNext.options[objCatNext.selectedIndex].text + " exists.";
                            return false;
                       }
                    }
                }             
        }
        return true;
    }

我的上述 Javascript 代码在 Chrome 中运行良好，但在 IE 11 中抛出以下异常。

Error: Unable to get property 'options' of undefined or null reference

我尝试首先检查 objCat 是否不为 null 或未定义，但仍然抛出异常，同样仅在 IE 中。

function Validate() {
        for (var i = 0; i < 2; i++) {
            var objCat = document.getElementById("ddlCategories" + i);
            if (objCat) { //check if objCat is not null or undefined but this has solved the issue.
                if (objCat.options[objCat.selectedIndex].text != "--SET--") {
                    for (var j = i + 1; j < 6; j++) {
                        var objCatNext = document.getElementById("ddlCategories" + j);
                        if (objCat.options[objCat.selectedIndex].text == objCatNext.options[objCatNext.selectedIndex].text) {
                            spnMessage.innerHTML = objCatNext.options[objCatNext.selectedIndex].text + " exists.";
                            return false;
                       }
                    }
              }  }             
        }
        return true;
    }

有人注意到可能的原因吗？

下面是在浏览器中查看页面源代码时生成的 html

<select name="ddlCategories0" onchange="javascript:setTimeout(&#39;__doPostBack(\&#39;ddlCategories0\&#39;,\&#39;\&#39;)&#39;, 0)" id="ddlCategories0" class="input Width250" onclick="Clear()">
<option value="0"> --SELECT--</option>
<option selected="selected" value="2">One</option>
<option value="3">Two</option>
</select>

 <select name="ddlCategories1" onchange="javascript:setTimeout(&#39;__doPostBack(\&#39;ddlCategories1\&#39;,\&#39;\&#39;)&#39;, 0)" id="ddlCategories1" class="input Width250" onclick="Clear()">
<option value="0"> --SELECT--</option>
<option value="2">One</option>
<option selected="selected" value="3">Two</option>
</select>

Answer 1

在调试提供的代码片段时，内部 FOR 循环似乎存在问题，其中 j 的初始值在第一次运行时为“2”，依次构建“ddlCategories2”和objCatNext 变为“未定义”。

不知道为什么要在“j”声明中添加 +1，即 var j = i + 1;但如果你输入 j = i 那么它会解决第一个错误。

function Validate() {
    var spnMessage = document.getElementById('message');
    for (var i = 0; i < 2; i++) {
        var objCat = document.getElementById("ddlCategories" + i);
        if (objCat) { //check if objCat is not null or undefined but this has solved the issue.
            if (objCat.options[objCat.selectedIndex].text != "--SET--") {
                for (var j = i; j < 6; j++) {
                    var objCatNext = document.getElementById("ddlCategories" + j);
                    if (objCat.options[objCat.selectedIndex].text == objCatNext.options[objCatNext.selectedIndex].text) {
                        spnMessage.innerHTML = objCatNext.options[objCatNext.selectedIndex].text + " exists.";
                        return false;
                   }
                }
          }  }             
    }
    return true;
}

接下来，在 JS 中声明“spnMessage”(目前尚未定义)。

工作 fiddle - http://jsfiddle.net/ylokesh/

希望有帮助。

一个小建议 - 如果您在 JSFiddle http://jsfiddle.net 上创建此代码的工作示例，那么调试将非常有帮助且快速。或 codepen http://codepen.io