Размещение DIV вокруг атрибута SELECT равносильно проблеме, почему?

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

Я думаю, что это потому, что родитель больше не является держателем вопроса. Теперь это идентификатор div.

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