javascript：全部数组 <select>项目返回未定义。为什么？

Question

i have a series of <input> and <select> items intermingled. i want to populate an array with these items as they appear on the page.

i created the inputItemsArray and the selectItemsArray the same way:

var inputItemsArray = document.getElementsById("formGroup").getElementsByTag("input");
var inputSelectArray = document.getElementsById("formGroup").getElementsByTag("select");

the input array works out just fine. the select array returns undefined. why?

what i'm trying to do is splice the contents of the submit array into the input array and THEN dump the values of those elements into a final array.

it works fine if i just use the input array, but because the select array is undefined...

here's the code:

var clientInputArray = document.getElementById("clientData").getElementsByTagName("input");
var clientSelectAray = document.getElementById("clientData").getElementsByTagName("select");

clientInputArray.splice(4,0,clientSelectArray[0]);  //  insert townType into array
clientInputArray.splice(5,0,clientSelectArray[1]);  //  insert province into array

console.log("clientInputArray: " + clientInputArray);

for (data in clientArray)
{
    if (clientArray[data].length != 0)
    {
        clientData.push(clientArray[data].value);
        console.log("data: " + data);
    } else {    //  because the last two elements of the array are empty...don't know why...
            break;
    }
}   
console.log("clientData: " + clientData);   
//clientData.push(companyName);

so, to restate: why does the select version return undefined?

WR!

Answer 1

var inputItemsArray = document.getElementsById("formGroup").getElementsByTag("input");
var inputSelectArray = document.getElementsById("**formsGroup**").getElementsByTag("select");

You have an 's' that should not be there in formsGroup... This is why you are getting undefined.

Answer 2

Your problem is:

1. You are treating the result of getElementsByTagName as an Array, but it's actually a NodeList .
2. You are using lazy for (a in b) iteration of the results instead of a proper numeric for loop.

Here is an updated and simplified test: http://jsfiddle.net/MMXKW/2/

As you can see:

• The results of both of them have non-zero length.
• When you iterate using for (a in b) on a NodeList you also get the enumerable properties of length and item .

Instead, use:

var selects = myForm.getElementsByTagName('select');
for (var i=0,len=selects.length;i<len;++i){
  var select = selects[i];
  // ...
}

As a side note, when you write for (foo in bar) you are also creating a global foo variable; you should normally use for (var foo in bar) when you actually need to enumerate properties of an object and not numeric values of an Array or Array-like object.