Select Box Woes

[GazMathias]

Hi Guys.

Hopefully someone can guide me with this, its driving me nuts!

Below is code from a little test I put together to test theory, in the real site, however, this will be looped from a database.

My problem, is that if I select, say, Option 8 from the second select box and click submit_2, the function picks up the third index from the first select box and so returns "Option3"

<script type = "text/javascript">

	function AddItem(theid) {
	
		var x=document.getElementById("cboProduct_" + theid).selectedIndex
		var y=document.getElementsByTagName("option")
		var code=y[x].value
		
		var qty = document.getElementById("txtQty_" + theid).value;
		
		alert(code)
	}
	
</script>

Code:<select name="cboProduct_1" id ="cboProduct_1">
<option selected value ="None">Select an option</option>
<option value="Option1">Option 1</option>
<option value="Option2">Option 2</option>
<option value="Option3">Option 3</option>
<option value="Option4">Option 4</option>
<option value="Option5">Option 5</option>
</select> Qty:<input type = "text" size="5" id="txtQty_1">

<input type="submit" value = "Add Item" onClick="AddItem('1')" name="submit_2" id="submit_2">

<br /> <br />

Code:<select name="cboProduct_2" id="cboProduct_2">
<option selected value ="oneN">Select an option</option>
<option value="Option6">Option 6</option>
<option value="Option7">Option 7</option>
<option value="Option8">Option 8</option>
<option value="Option9">Option 9</option>
<option value="Option10">Option 10</option>
</select> Qty:
<input type = "text" size="5" id="txtQty_2">

<input type="submit" value = "Add Item" onClick="AddItem('2')" name="submit_2" id="submit_2">

And so on.....

Anyone know how to fix this?

Suggestions of alternate approaches are also welcome.

Gaz.

[acoder]

You can either use:

selObj.options[selObj.selectedIndex]
// or if you must use getElementsByTagName
selObj.getElementsByTagName("option")[selObj.selectedIndex]

where selObj is a reference to the select box.

[Frinavale]

You can either use:...is a reference to the select box.

Is there an Or to your either acoder ?

[GazMathias]

Thanks acoder, works like a charm. I was trying to do this yesterday but was using:

theid.options[theid.selectedIndex]

Where theid contained the full name of the element, seems obvious now!

[acoder]

Is there an Or to your either acoder ?

Yes, in the code :) Supposed to be two sets of code tags, but I was lazy!

[acoder]

Thanks acoder, works like a charm.

No problem.

I was trying to do this yesterday but was using:

theid.options[theid.selectedIndex]

Where theid contained the full name of the element, seems obvious now!

That might've worked in IE, but it's obviously incorrect. Another option is to get the value directly:

selObj.value

but you need to make sure you have the values of the options set for it to work in IE.

[omerbutt]

Thanks acoder, works like a charm. I was trying to do this yesterday but was using:

theid.options[theid.selectedIndex]

Where theid contained the full name of the element, seems obvious now!

another is to make the form object and access through that obj you can either pass that obj through a function assigned to an onclick event on a button or make it manually in the function
lets say you form name is myform so

var fobj=document.forms['myform'];
fobj.elements['name'].options[fobj.elements['name'].selectedIndex].value;