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

Add/Remove Select List Options.

chunk1978
100+
P: 224
hello.

so i have 2 select menus which add and remove options from a 3rd select menu... it seems, however, that it's not possible to use different select menus to toggle a 3rd, because when an options[#] is removed, the list's options switch, making written javascript unusable?

the following code is an example:

Expand|Select|Wrap|Line Numbers
  1. <script type="text/javascript">
  2.  
  3. function ToggleEmail() 
  4.     {
  5.     if (document.form.email.value == "Select2")
  6.     {
  7.     AddEmailToList()
  8.       }
  9.     else{ 
  10.     RemoveEmailFromList() 
  11.     }
  12. }
  13.  
  14. function RemoveEmailFromList() 
  15.     {
  16.     if (document.form.list.options[2].text == "Email") 
  17.     {document.form.list.options[2] = null;} 
  18. }
  19.  
  20. function AddEmailToList() 
  21.     {
  22.     var EMAIL = document.form.list;
  23.     if (EMAIL.options[2].text != "Email") {
  24.     EMAIL.options[3] = new Option(EMAIL.options[2].text, EMAIL.options[2].value);
  25.     var option = new Option("Email", "List2");
  26.     EMAIL.options[2] = option;
  27.     }
  28. }
  29.  
  30. function ToggleTakeOut() 
  31.     {
  32.     if (document.form.takeout.value == "SelectC")
  33.     {
  34.     AddTakeOutToList()
  35.       }
  36.     else{ 
  37.     RemoveTakeOutFromList() 
  38.     }
  39. }
  40.  
  41. function RemoveTakeOutFromList() 
  42.     {
  43.     if (document.form.list.options[3].text == "Take Out") 
  44.     {document.form.list.options[3] = null;} 
  45. }
  46.  
  47. function AddTakeOutToList() 
  48.     {
  49.     var TAKEOUT = document.form.list;
  50.     if (TAKEOUT.options[3].text != "Take Out") {
  51.     TAKEOUT.options[3] = new Option(TAKEOUT.options[3].text, TAKEOUT.options[3].value);
  52.     var option = new Option("Take Out", "List3");
  53.     TAKEOUT.options[3] = option;
  54.     }
  55. }
  56.  
  57. </script>
  58. </head>
  59.  
  60. <body>
  61. <form id="form" name="form">
  62. <p>A) 
  63. <select name="email" id="email" onchange="ToggleEmail();">
  64. <option value="Select0" selected></option>
  65. <option value="Select1">Remove Email From List</option>
  66. <option value="Select2">Add Email To List</option>
  67. </select> 
  68. </p>B)
  69. <select name="takeout" id="takeout" onchange="ToggleTakeOut();">
  70. <option value="SelectA" selected></option>
  71. <option value="SelectB">Remove Take Out</option>
  72. <option value="SelectC">Add Take Out</option>
  73. </select> 
  74.  
  75. <p>Final List</p>
  76. <select name="list" id="list">
  77. <option value="List0"></option>
  78. <option value="List1">Courier</option>
  79. <option value="List2">Email</option>
  80. <option value="List3">Take Out</option>
  81. </select>
  82. </p>
  83. </form>
  84. </body>
  85. </html>
  86.  
Feb 15 '07 #1
Share this Question
Share on Google+
7 Replies

iam_clint
Expert 100+
P: 1,208
I seen you tried to make a good attempt at this

I fixed up your code alittle bit (alot) :P and this should work for you... nice attempt at it though try to learn off what i'm giving you now
Expand|Select|Wrap|Line Numbers
  1. <script type="text/javascript">
  2. function Toggle(val) {
  3. if (val == "RemEmail") {
  4.   RemoveItem("Email");
  5. }
  6. if (val == "RemTakeOut") {
  7.   RemoveItem("Take Out");
  8. }
  9. if (val == "AddEmail") {
  10.   AddItem("Email");
  11. }
  12. if (val == "AddTakeOut") {
  13.   AddItem("Take Out");
  14. }
  15. }
  16. function AddItem(val) {
  17.     var list = document.form.list.options;
  18.     var exists = false;
  19.     for (i=0; i<=list.length-1; i++) {
  20.      if (list[i].text == val) { exists = true; }
  21.     }
  22.     if (exists == false) { 
  23.       var option = new Option(val, val);
  24.       list[list.length] = option;
  25.     }
  26. }
  27. function RemoveItem(val) {
  28.     var list = document.form.list.options;
  29.     for (i=0; i<=list.length-1; i++) {
  30.  if (list[i].text == val) { list[i] = null; } 
  31.     }
  32. }
  33. </script>
  34. </head>
  35. <body>
  36. <form id="form" name="form">
  37. <p>A) 
  38. <select name="email" id="email" onchange="Toggle(this.value);">
  39. <option value="Select0" selected></option>
  40. <option value="RemEmail">Remove Email From List</option>
  41. <option value="AddEmail">Add Email To List</option>
  42. </select> 
  43. </p>B)
  44. <select name="takeout" id="takeout" onchange="Toggle(this.value);">
  45. <option value="SelectA" selected></option>
  46. <option value="RemTakeOut">Remove Take Out</option>
  47. <option value="AddTakeOut">Add Take Out</option>
  48. </select> 
  49. <p>Final List</p>
  50. <select name="list" id="list">
  51. <option value="List0"></option>
  52. <option value="List1">Courier</option>
  53. <option value="List2">Email</option>
  54. <option value="List3">Take Out</option>
  55. </select>
  56. </p>
  57. </form>
  58. </body>
  59. </html>
  60.  
Feb 15 '07 #2

chunk1978
100+
P: 224
thanks a lot iam_clint! you're code is so much more compact than my crazy code... and it works to boot! thanks again :-)
Feb 15 '07 #3

chunk1978
100+
P: 224
I seen you tried to make a good attempt at this

I fixed up your code alittle bit (alot) :P and this should work for you... nice attempt at it though try to learn off what i'm giving you now
actually, i have one last burning question concerning this script... when the option is added back to the select list, does it have it's original value? so if (example) "Email" is removed, and then added back, will "Email" still have it's original "List2" value?

if not... how do i tweek this script to make sure the item's maintain their original values? (for PHP Script reasons)
Feb 17 '07 #4

acoder
Expert Mod 15k+
P: 16,027
If you want that, pass the text and value to the add function, e.g.
Expand|Select|Wrap|Line Numbers
  1. if (val == "AddEmail") {
  2.   AddItem("Email","List2");
  3. }
then in your AddItem function:
Expand|Select|Wrap|Line Numbers
  1. function AddItem(txt,val) {
  2.     var list = document.form.list.options;
  3.     var exists = false;
  4.     for (i=0; i<=list.length-1; i++) {
  5.      if (list[i].text == txt) { exists = true; }
  6.     }
  7.     if (exists == false) { 
  8.       var option = new Option(txt, val);
  9.       list[list.length] = option;
  10.     }
  11. }
An Option object has optional arguments such as text, value, defaultSelected and selected.
Feb 17 '07 #5

chunk1978
100+
P: 224
wow... it now works amazing... thanks so much guys for you help
Feb 17 '07 #6

chunk1978
100+
P: 224
wow... it now works amazing... thanks so much guys for you help
oh wait... hah... sorry to carry on this discussion... anyway, so the new code works fine... but i'm concerned because when an option is added back, even if it has the "List2" value, it's listed last... the previous "List3" value is now second...(so i'm assuming the "List3" value is now "List2"??)

so does that mean that in a 3 option drop menu there are two options with "List2" values? or does the original "List3" that has been displaced maintain it's value of "List3" and therefore "List2" and "List3" are simply no longer in order?

i hope that's not confusing...
Feb 17 '07 #7

chunk1978
100+
P: 224
oh... nevermind... i just realized that the order (options[0], options[1], etc.) changes, but the value should stay the same... and that shouldn't effect a PHP script that is relying on option values...

please excuse... :-)
Feb 17 '07 #8

Post your reply

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