为什么在SELECT属性周围放一个DIV会很麻烦呢?

Putting a DIV around a SELECT attribute is equal to trouble, why?

本文关键字：DIV 一个 麻烦 SELECT 属性 周围放 为什么      更新时间：2023-09-26

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

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>

这个问题几乎肯定与您试图获取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;
}

我认为这是因为父母不再是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

所以holder现在应该调用document.getElementById("test")

相关文章：