Javascript - IE11 - querySelectAll（）で結果が無効

Question

IE（11以下）でシンプルなjs関数の問題があります。私はdocument.querySelector（「＃IDを」）を使用する場合#IDが要素にリンクされている。querySelectorAll（「オプション」）、それはオプションの配列を返しますが、

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

私の非常に単純なように、「無効」 JS：

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

と私のHTMLコード（exemple）：

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

これは、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>

私は最初の選択にProj2を選択した場合、それだけでProj2私が表示されます - AとProj2 - B第2の選択に（クロム上）。 IE11では、2つの「オプション」が表示され、内部にはテキストは表示されません。

Answer 1

innerHTMLを設定すると、IEが非常に奇妙な動作をするという問題があります。削除している要素のテキストノードを削除します。これは標準ではなく、間違いなくバグです。 （実際、私は、ある時点でのバグとして報告思い出すように見える。）

あなたはselectをクリアするinnerHTML = ''を使用して、代わりに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>

---

サイドノート：あなたはまた、前innerHTML事を持っていました0チェック。私はその中にifの体を入れました。