By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
459,341 Members | 1,681 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 459,341 IT Pros & Developers. It's quick & easy.

Select Box Woes

GazMathias
Expert 100+
P: 200
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"

Expand|Select|Wrap|Line Numbers
  1. <script type = "text/javascript">
  2.  
  3.     function AddItem(theid) {
  4.  
  5.         var x=document.getElementById("cboProduct_" + theid).selectedIndex
  6.         var y=document.getElementsByTagName("option")
  7.         var code=y[x].value
  8.  
  9.         var qty = document.getElementById("txtQty_" + theid).value;
  10.  
  11.         alert(code)
  12.     }
  13.  
  14. </script>
  15.  
  16. Code:<select name="cboProduct_1" id ="cboProduct_1">
  17. <option selected value ="None">Select an option</option>
  18. <option value="Option1">Option 1</option>
  19. <option value="Option2">Option 2</option>
  20. <option value="Option3">Option 3</option>
  21. <option value="Option4">Option 4</option>
  22. <option value="Option5">Option 5</option>
  23. </select> Qty:<input type = "text" size="5" id="txtQty_1">
  24.  
  25. <input type="submit" value = "Add Item" onClick="AddItem('1')" name="submit_2" id="submit_2">
  26.  
  27. <br /> <br />
  28.  
  29. Code:<select name="cboProduct_2" id="cboProduct_2">
  30. <option selected value ="oneN">Select an option</option>
  31. <option value="Option6">Option 6</option>
  32. <option value="Option7">Option 7</option>
  33. <option value="Option8">Option 8</option>
  34. <option value="Option9">Option 9</option>
  35. <option value="Option10">Option 10</option>
  36. </select> Qty:
  37. <input type = "text" size="5" id="txtQty_2">
  38.  
  39. <input type="submit" value = "Add Item" onClick="AddItem('2')" name="submit_2" id="submit_2">
  40.  
  41. And so on.....
  42.  
Anyone know how to fix this?

Suggestions of alternate approaches are also welcome.

Gaz.
May 29 '09 #1
Share this Question
Share on Google+
6 Replies


acoder
Expert Mod 15k+
P: 16,027
You can either use:
Expand|Select|Wrap|Line Numbers
  1. selObj.options[selObj.selectedIndex]
  2. // or if you must use getElementsByTagName
  3. selObj.getElementsByTagName("option")[selObj.selectedIndex]
where selObj is a reference to the select box.
May 29 '09 #2

Frinavale
Expert Mod 5K+
P: 9,731
@acoder
Is there an Or to your either acoder ?
May 29 '09 #3

GazMathias
Expert 100+
P: 200
Thanks acoder, works like a charm. I was trying to do this yesterday but was using:

Expand|Select|Wrap|Line Numbers
  1. theid.options[theid.selectedIndex]
  2.  
Where theid contained the full name of the element, seems obvious now!
May 29 '09 #4

acoder
Expert Mod 15k+
P: 16,027
@Frinavale
Yes, in the code :) Supposed to be two sets of code tags, but I was lazy!
May 29 '09 #5

acoder
Expert Mod 15k+
P: 16,027
@GazMathias
No problem.
I was trying to do this yesterday but was using:

Expand|Select|Wrap|Line Numbers
  1. theid.options[theid.selectedIndex]
  2.  
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:
Expand|Select|Wrap|Line Numbers
  1. selObj.value
but you need to make sure you have the values of the options set for it to work in IE.
May 29 '09 #6

omerbutt
100+
P: 638
@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
Expand|Select|Wrap|Line Numbers
  1. var fobj=document.forms['myform'];
  2. fobj.elements['name'].options[fobj.elements['name'].selectedIndex].value;
  3.  
May 30 '09 #7

Post your reply

Sign in to post your reply or Sign up for a free account.