在 SELECT 属性周围放置一个 DIV 就等于麻烦，为什么呢？

Question

我是一个javascript学习者。我有一个即将完成的小脚本。我只想将 DIV 放在 html select 属性周围。如果我这样做，我的脚本将无法工作。为什么？这是禁止的吗？

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("test")