473,722 Members | 2,338 Online
Bytes | Software Development & Data Engineering Community
+ Post

Home Posts Topics Members FAQ

Add/Remove Select List Options.

224 New Member

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">
  3. function ToggleEmail() 
  4.     {
  5.     if (document.form.email.value == "Select2")
  6.     {
  7.     AddEmailToList()
  8.       }
  9.     else{ 
  10.     RemoveEmailFromList() 
  11.     }
  12. }
  14. function RemoveEmailFromList() 
  15.     {
  16.     if (document.form.list.options[2].text == "Email") 
  17.     {document.form.list.options[2] = null;} 
  18. }
  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. }
  30. function ToggleTakeOut() 
  31.     {
  32.     if (document.form.takeout.value == "SelectC")
  33.     {
  34.     AddTakeOutToList()
  35.       }
  36.     else{ 
  37.     RemoveTakeOutFromList() 
  38.     }
  39. }
  41. function RemoveTakeOutFromList() 
  42.     {
  43.     if (document.form.list.options[3].text == "Take Out") 
  44.     {document.form.list.options[3] = null;} 
  45. }
  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. }
  57. </script>
  58. </head>
  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> 
  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>
Feb 15 '07 #1
7 16886
1,208 Recognized Expert Top Contributor
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>
Feb 15 '07 #2
224 New Member
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
224 New Member
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
16,027 Recognized Expert Moderator MVP
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
224 New Member
wow... it now works amazing... thanks so much guys for you help
Feb 17 '07 #6
224 New Member
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
224 New Member
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

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

Similar topics

by: Ramamoorthy Ramasamy | last post by:
Hi all, I would like to create a page with VBscript and ASP which will contain two list-boxes one in the left side and the other in the right side with two buttons namely "Add>>" and "<<Remove" so that if the user selects a value listed in the left side list-box and presses "Add>>" then that selected value should go inside the right side list-box. Similarly if the user selects a value listed in the right side list-box and after clicking...
by: Rob | last post by:
Hi, I've got a small javascript problem and I'm kinda stuck. I'm using classic ASP. I have a select box which is populated by a database query and there is a buttom that when clicked it will move the selected item from the first select box and move it to another select box: document.form2.list.options = new Option(count + 1 + ". " + name,company); Then I want to remove it from the first select box:
by: callmebill | last post by:
I'm relatively new to javascript, and I'm trying to decide whether the following (and if so, clues on how to do it): I'd like to create two HTML multiple-select boxes. The first would be a list of items, and the second would be a list of categories. By clicking a category in the 2nd box, the members of that category (from the first box) would be highlighted (indicated here by arrows). E.g., -- List of Nums -- -- Categories -- 1...
by: Stefan Finzel | last post by:
Hi trying to remove one or all elements of select options fails for Pocket Internet Explorer. Is there a way to do this? if is_PIE { // this does not work on Pocket IE while (opt.length) { opt.remove(0); }
by: rkrishna | last post by:
I have an issue that I am trying to solve. I have three select lists (supposed to be preference 1, 2,3) and each of them have the same three options. As soon as I select one of the choices from list1, i would like to remove it from the options of list 2 and so on for list 3. So effectively, List 2 has two choices and List3 only has one choice that can be made. Any pointers on how to accomplish this?
by: Ian Richardson | last post by:
Hi, The function I've put together below is a rough idea to extend a SELECT list, starting from: <body> <form name="bambam"> <select id="fred"> <option value="1">1</option> <option value="2">2</option>
by: imrantbd | last post by:
This is my first problem.Please help me. I have the following code: <head> <script language="JavaScript"> function addSrcToDestList() { destList1 = window.document.forms.destList; srcList = window.document.forms.srcList;
by: Beholder | last post by:
I hope that someone can help me with the following: Short background explenation: I have a shrfepoint page (newform.aspx) in a item list. On this page is a lookup column that displays a lookup of all category items in previous items. In the code this results in a select/options list like this: <SELECT TABINDEX=1 NAME="urn:schemas-microsoft-com:office:office#CatLookup"><OPTION
by: Richard Maher | last post by:
Hi, I have read many of the copius entries on the subject of IE performance (or the lack thereof) when populating Select Lists. I don't mind the insert performance so much, (I get 100x120byte rows inserted/sec up to 500, and 100rows/6secs up to 3000, which isn't great but then the Row Count is clicking away for the user to see and they can hit the "cancel" button at anytime, so overall I'm happy), what really disappoints me is the...
by: Hystou | last post by:
Most computers default to English, but sometimes we require a different language, especially when relocating. Forgot to request a specific language before your computer shipped? No problem! You can effortlessly switch the default language on Windows 10 without reinstalling. I'll walk you through it. First, let's disable language synchronization. With a Microsoft account, language settings sync across devices. To prevent any complications,...
by: Oralloy | last post by:
Hello folks, I am unable to find appropriate documentation on the type promotion of bit-fields when using the generalised comparison operator "<=>". The problem is that using the GNU compilers, it seems that the internal comparison operator "<=>" tries to promote arguments from unsigned to signed. This is as boiled down as I can make it. Here is my compilation command: g++-12 -std=c++20 -Wnarrowing bit_field.cpp Here is the code in...
by: jinu1996 | last post by:
In today's digital age, having a compelling online presence is paramount for businesses aiming to thrive in a competitive landscape. At the heart of this digital strategy lies an intricately woven tapestry of website design and digital marketing. It's not merely about having a website; it's about crafting an immersive digital experience that captivates audiences and drives business growth. The Art of Business Website Design Your website is...
by: Hystou | last post by:
Overview: Windows 11 and 10 have less user interface control over operating system update behaviour than previous versions of Windows. In Windows 11 and 10, there is no way to turn off the Windows Update option using the Control Panel or Settings app; it automatically checks for updates and installs any it finds, whether you like it or not. For most users, this new feature is actually very convenient. If you want to control the update process,...
by: tracyyun | last post by:
Dear forum friends, With the development of smart home technology, a variety of wireless communication protocols have appeared on the market, such as Zigbee, Z-Wave, Wi-Fi, Bluetooth, etc. Each protocol has its own unique characteristics and advantages, but as a user who is planning to build a smart home system, I am a bit confused by the choice of these technologies. I'm particularly interested in Zigbee because I've heard it does some...
by: TSSRALBI | last post by:
Hello I'm a network technician in training and I need your help. I am currently learning how to create and manage the different types of VPNs and I have a question about LAN-to-LAN VPNs. The last exercise I practiced was to create a LAN-to-LAN VPN between two Pfsense firewalls, by using IPSEC protocols. I succeeded, with both firewalls in the same network. But I'm wondering if it's possible to do the same thing, with 2 Pfsense firewalls...
by: 6302768590 | last post by:
Hai team i want code for transfer the data from one system to another through IP address by using C# our system has to for every 5mins then we have to update the data what the data is updated we have to send another system
by: muto222 | last post by:
How can i add a mobile payment intergratation into php mysql website.
by: bsmnconsultancy | last post by:
In today's digital era, a well-designed website is crucial for businesses looking to succeed. Whether you're a small business owner or a large corporation in Toronto, having a strong online presence can significantly impact your brand's success. BSMN Consultancy, a leader in Website Development in Toronto offers valuable insights into creating effective websites that not only look great but also perform exceptionally well. In this comprehensive...

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.