Hi all,

Having an issue with "selectedIndex" (for a select field).

Basically I'm creating XML code via a server-side PHP file and retrieving this code through AJAX. Once I retrieve the data, I'm placing it in their appropriate fields.

This is the XML output:

<response>
	<data>
		<row>
			<item>ProductEight</item>
		</row>
		<row>
			<item id='selected'>CategoryOne</listItem>
			<item id='notSelected'>CategoryTwo</listItem>
		</row>
		<row>
			<item id='selected'>MakeOne</listItem>
			<item id='notSelected'>MakeTwo</listItem>
		</row>
		<row>
			<item id='selected'>ModelOne</listItem>
			<item id='notSelected'>ModelTwo</listItem>
		</row>
		<row>
			<item id='selected'>NumberOne</listItem>
		</row>
		<row>
			<item>1</item>
		</row>
		<row>
			<item>1.20</item>
		</row>
		<row>
			<item>asdfdgf</item>
		</row>
		<row>
			<item>0000-00-00</item>
		</row>
	</data>
	<fields>
		<field>Product_Name</field>
		<field>Category</field>
		<field>Make</field>
		<field>Model</field>
		<field>Model_Number</field>
		<field>Quantity</field>
		<field>Price</field>
		<field>SKU</field>
		<field>Expiry</field>
	</fields>
</response>

This is the JavaScript/AJAX code:

response = xmlhttp.responseXML;

var resp = response.getElementsByTagName("response");

var data = resp[0].getElementsByTagName("data");
var fields = resp[0].getElementsByTagName("fields");

var length = parseInt(fields[0].childNodes.length / 2);
var fieldsArray = new Array(length);

for (i = 0; i < length;i++) {
    fieldsArray[i] = "mod_"+fields[0].getElementsByTagName("field")[i].childNodes[0].nodeValue;
}

for (i = 0; i < (parseInt(data[0].childNodes.length / 2)); i++) {
    var row  = data[0].getElementsByTagName("row");
    for (j = 0; j < (parseInt(row[i].childNodes.length / 2)); j++) {
        id = row[i].getElementsByTagName("item")[j].getAttribute("id");

        if (id == null) {
            document.getElementById(fieldsArray[i]).value = row[i].getElementsByTagName("item")[j].childNodes[0].nodeValue;	
        } else {
            document.getElementById(fieldsArray[i]).options.length = 1;

            for (k = 0; k < (parseInt(row[i].childNodes.length / 2)); k++) {
                var newOption = document.createElement("option");
                newOption.text = row[i].getElementsByTagName("item")[k].childNodes[0].nodeValue;
                newOption.value = row[i].getElementsByTagName("item")[k].childNodes[0].nodeValue;
                var Option = document.getElementById(fieldsArray[i]).options[k+1];
                document.getElementById(fieldsArray[i]).add(newOption,Option);
            }

            if (id == "selected") {
                document.getElementById(fieldsArray[i]).selectedIndex = (j+1);
            }
        }
    }
}

So as you can see, if there's an XML node that has an ID attribute, it is going to be select field option. If the ID is set to "selected" I naturally want to select the proper index.

As far as everything goes, it works great up until this chunk of code:

if (id == "selected") {
    document.getElementById(fieldsArray[i]).selectedIndex = (j+1);
}

In my case, there are 4 select fields. That piece of code will only work for the 4th select field, the previous three remain on the selectedIndex of 0. From what I can see, this SHOULD be working, but naturally it isn't :(

Any ideas?

This question has already been answered. Start a new discussion instead.