Javascript

Question

我对 IE（11 及更低版本）上的简单 js 函数有疑问。当我使用 document.querySelector('#id').querySelectorAll('option') 时，#id 链接到一个元素，它 return 一个选项数组，但 "void" 喜欢

<option id="id"></options>

我非常简单的 JS :

var projectsList = document.querySelector('#taskproject').querySelectorAll('option');
console.dirxml(projectsList);

和我的 HTML 代码（一个例子）：

<select id="taskproject" name="newproject">
    <option id="1">Project1</option>
    <option id="2">Project2</option>
    [...]
    <option id="99">Project99</option>
</select>

这将return，在IE11控制台console.dirxml功能

<NodeList lenght="99">
    <option id="1"></option>
    [....]
    <option id="99"></option>
</NodeList>

这适用于 chrome，选项内的文本写在控制台上。感谢您的帮助！

使用可运行示例进行编辑

var projectsList = document.querySelector('#taskproject').querySelectorAll('option');

  function giveSelection(appId)
  {
      var appSelector = document.querySelector('#taskapp');
      var projectSelector = document.querySelector('#taskproject');
      projectSelector.innerHTML = '';
      if(projectSelector != null)
      {
        for(var i=0; i<projectsList.length; i++)
        {
          if(projectsList[i].id.split('_')[1] === appId)
          {
            projectSelector.appendChild(projectsList[i]);
          } 
        }
      }      
  }

<select id="taskapp" name="new_app_id" onchange="giveSelection(this.value)">
    <option value="55" >Proj1</option>
    <option value="33" >Proj2</option>
    <option value="62" >Proj3</option>
    <option value="69" >Proj4</option>
</select>

<select id="taskproject" name="new_project_id">
    <option id="appWithProject_55" value="239" >Proj1 - a</option>
    <option id="appWithProject_55" value="273" >Proj1 - b</option>
    <option id="appWithProject_55" value="289" >Proj1 - c</option>
    <option id="appWithProject_33" value="106" >Proj2 - a</option>
    <option id="appWithProject_33" value="105" >Proj2 - b</option>
    <option id="appWithProject_62" value="263" >Proj3 - a</option>
    <option id="appWithProject_62" value="264" >Proj3 - b</option>
    <option id="appWithProject_69" value="285" >Proj4 - a</option>
    <option id="appWithProject_69" value="286" >Proj4 - b</option>
</select>

在这里，如果我在第一个 select 上选择 Proj2，它只会在第二个 select 上显示 Proj2 - a 和 Proj2 - b（在 chrome 上）。在 IE11 上，它会显示 2 "options"，里面没有文字。

Answer 1

问题是当您设置 innerHTML 时，IE 有一个非常奇怪的行为。它删除它正在删除的元素的文本节点。这是非标准的，可以说是一个错误。（事实上，我似乎记得有一次将其报告为错误。）

您可以通过不使用 innerHTML = '' 来清除 select 而是使用 removeChild:

来解决这个问题

var projectsList = document.querySelector('#taskproject').querySelectorAll('option');

function giveSelection(appId)
{
    var appSelector = document.querySelector('#taskapp');
    var projectSelector = document.querySelector('#taskproject');
    if(projectSelector != null)
    {
      // Not this: projectSelector.innerHTML = '';
      while (projectSelector.firstChild) {
        projectSelector.removeChild(projectSelector.firstChild);
      }
      for(var i=0; i<projectsList.length; i++)
      {
        if(projectsList[i].id.split('_')[1] === appId)
        {
          projectSelector.appendChild(projectsList[i]);
        } 
      }
    }      
}

<select id="taskapp" name="new_app_id" onchange="giveSelection(this.value)">
    <option value="55" >Proj1</option>
    <option value="33" >Proj2</option>
    <option value="62" >Proj3</option>
    <option value="69" >Proj4</option>
</select>

<select id="taskproject" name="new_project_id">
    <option id="appWithProject_55" value="239" >Proj1 - a</option>
    <option id="appWithProject_55" value="273" >Proj1 - b</option>
    <option id="appWithProject_55" value="289" >Proj1 - c</option>
    <option id="appWithProject_33" value="106" >Proj2 - a</option>
    <option id="appWithProject_33" value="105" >Proj2 - b</option>
    <option id="appWithProject_62" value="263" >Proj3 - a</option>
    <option id="appWithProject_62" value="264" >Proj3 - b</option>
    <option id="appWithProject_69" value="285" >Proj4 - a</option>
    <option id="appWithProject_69" value="286" >Proj4 - b</option>
</select>

旁注：在 if (projectSelector != null) 检查之前，您还进行了 innerHTML 事情 。我把它放在 if 的体内。

Javascript - IE11 - querySelectorAll() 无效结果

Javascript - IE11 - void results with querySelectAll()

internet-explorer-11

selectors-api