圍繞SELECT屬性放置DIV等於麻煩，爲什麼？

Question

我是一個JavaScript學習者。我有一個幾乎完成的腳本。我只是想把DIV放在html選擇屬性的周圍。如果我這樣做，我的腳本將無法工作。爲什麼？這是禁止的嗎？

http://jsfiddle.net/triggerload/XHWwg/159/

<div id="test"> 
     <select class="valueList" name="n1"> 
     <option selected value="0"></option> 
     <option value="1">1</option> 
     <option value="2">2</option> 
     <option value="3">3</option> 
     <option value="4">4</option> 
     <option value="5">5</option> 
     <option value="6">6</option> 
     <option value="7">7</option> 
     </select> 
    </div> 

Answer 1

問題幾乎肯定與你正在試圖抓住select元素的方式來做到：

function grabFormSelects(parent, class_name) 
{ 
    //make new array to hold nodes 
    var nodes = []; 
    for(var i=0;i<parent.childNodes.length;i++) 
    { 
     var node = parent.childNodes[i]; 
     //filter out any node that isn't an element node and doesn't have the class name we're looking for 
     if(node.nodeType === 1 && node.className === class_name) 
     { 
      nodes.push(node); 
     } 
    } 
    return nodes; 
} 

您只查看question_holder的直接子節點，但是當您添加div時，select元素不再是question_holder的直接子節點，它是div的子節點你添加了。所以當然它不會被你的grabFormSelect()代碼返回。

作爲速戰速決，你可以嘗試：

function isDescendent(node, parent) { 
    //see if any of the nodes ancestors match the specified parent node 
    while (node.parentNode && node.parentNode != parent) { 
     node = node.parentNode; 
    } 
    return node.parentNode == parent; 
} 

function grabFormSelects(parent, class_name) 
{ 
    //make new array to hold nodes 
    var nodes = []; 
    var selects = document.getElementsByTagName("select"); 
    for(var i=0;i<selects.length;i++) 
    { 
     var node = selects[i]; 
     //filter out any node that isn't an element node and doesn't have the class name we're looking for 
     if(node.nodeType === 1 && node.className === class_name && isDescendent(node, parent)) 
     { 
      nodes.push(node); 
     } 
    } 
    return nodes; 
} 

Answer 2

我認爲，這是因爲父母不再question_holder。它現在是div的id。

function addListeners() 
{ 
    var holder = document.getElementById("question_holder"); 
    var selects = grabFormSelects(holder, "valueList"); 
    var holder2 = document.getElementById("question_holder2"); 
    var selects2 = grabFormSelects(holder2, "valueList2"); 
    for(var i=0;i<selects.length;i++) 
    { 
     selects[i].onchange = checkTarget; 
    } 
    for(var i=0;i<selects2.length;i++) 
    { 
     selects2[i].onchange = checkTarget2; 
    } 
} 

function grabFormSelects(parent, class_name) 
{ 
    //make new a 

所以現在持有人應調用的document.getElementById（「測試」）