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]

@acoder
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]

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

[acoder]

@GazMathias
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]

@GazMathias
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;