Add/Remove Select List Options.

chunk1978

224 100+

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

 
<script type="text/javascript">
 
function ToggleEmail() 

    {

    if (document.form.email.value == "Select2")

    {

    AddEmailToList()

      }

    else{ 

    RemoveEmailFromList() 

    }

}
 
function RemoveEmailFromList() 

    {

    if (document.form.list.options[2].text == "Email") 

    {document.form.list.options[2] = null;} 

}
 
function AddEmailToList() 

    {

    var EMAIL = document.form.list;

    if (EMAIL.options[2].text != "Email") {

    EMAIL.options[3] = new Option(EMAIL.options[2].text, EMAIL.options[2].value);

    var option = new Option("Email", "List2");

    EMAIL.options[2] = option;

    }

}
 
function ToggleTakeOut() 

    {

    if (document.form.takeout.value == "SelectC")

    {

    AddTakeOutToList()

      }

    else{ 

    RemoveTakeOutFromList() 

    }

}
 
function RemoveTakeOutFromList() 

    {

    if (document.form.list.options[3].text == "Take Out") 

    {document.form.list.options[3] = null;} 

}
 
function AddTakeOutToList() 

    {

    var TAKEOUT = document.form.list;

    if (TAKEOUT.options[3].text != "Take Out") {

    TAKEOUT.options[3] = new Option(TAKEOUT.options[3].text, TAKEOUT.options[3].value);

    var option = new Option("Take Out", "List3");

    TAKEOUT.options[3] = option;

    }

}
 
</script>

</head>
 
<body>

<form id="form" name="form">

<p>A) 

<select name="email" id="email" onchange="ToggleEmail();">

<option value="Select0" selected></option>

<option value="Select1">Remove Email From List</option>

<option value="Select2">Add Email To List</option>

</select> 

</p>B)

<select name="takeout" id="takeout" onchange="ToggleTakeOut();">

<option value="SelectA" selected></option>

<option value="SelectB">Remove Take Out</option>

<option value="SelectC">Add Take Out</option>

</select> 
 
<p>Final List</p>

<select name="list" id="list">

<option value="List0"></option>

<option value="List1">Courier</option>

<option value="List2">Email</option>

<option value="List3">Take Out</option>

</select>

</p>

</form>

</body>

</html>

Feb 15 '07 #1

Subscribe Post Reply

16811

iam_clint

1,208

Expert 1GB

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

 
<script type="text/javascript">

function Toggle(val) {

if (val == "RemEmail") {

  RemoveItem("Email");

}

if (val == "RemTakeOut") {

  RemoveItem("Take Out");

}

if (val == "AddEmail") {

  AddItem("Email");

}

if (val == "AddTakeOut") {

  AddItem("Take Out");

}

}

function AddItem(val) {

    var list = document.form.list.options;

    var exists = false;

    for (i=0; i<=list.length-1; i++) {

     if (list[i].text == val) { exists = true; }

    }

    if (exists == false) { 

      var option = new Option(val, val);

      list[list.length] = option;

    }

}

function RemoveItem(val) {

    var list = document.form.list.options;

    for (i=0; i<=list.length-1; i++) {

 if (list[i].text == val) { list[i] = null; } 

    }

}

</script>

</head>

<body>

<form id="form" name="form">

<p>A) 

<select name="email" id="email" onchange="Toggle(this.value);">

<option value="Select0" selected></option>

<option value="RemEmail">Remove Email From List</option>

<option value="AddEmail">Add Email To List</option>

</select> 

</p>B)

<select name="takeout" id="takeout" onchange="Toggle(this.value);">

<option value="SelectA" selected></option>

<option value="RemTakeOut">Remove Take Out</option>

<option value="AddTakeOut">Add Take Out</option>

</select> 

<p>Final List</p>

<select name="list" id="list">

<option value="List0"></option>

<option value="List1">Courier</option>

<option value="List2">Email</option>

<option value="List3">Take Out</option>

</select>

</p>

</form>

</body>

</html>

Feb 15 '07 #2

chunk1978

224

100+

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

224

100+

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

16,027

Expert Mod 8TB

If you want that, pass the text and value to the add function, e.g.

Expand|Select|Wrap|Line Numbers

 if (val == "AddEmail") {

  AddItem("Email","List2");

}

then in your AddItem function:

Expand|Select|Wrap|Line Numbers

 function AddItem(txt,val) {

    var list = document.form.list.options;

    var exists = false;

    for (i=0; i<=list.length-1; i++) {

     if (list[i].text == txt) { exists = true; }

    }

    if (exists == false) { 

      var option = new Option(txt, val);

      list[list.length] = option;

    }

}

An Option object has optional arguments such as text, value, defaultSelected and selected.

Feb 17 '07 #5

chunk1978

224

100+

wow... it now works amazing... thanks so much guys for you help

Feb 17 '07 #6

chunk1978

224

100+

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

224

100+

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

Similar topics

2 list-boxes with add & remove button

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"...

ASP / Active Server Pages

Remove an item from a select box

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...

Javascript

Select boxes to select sets

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...

Javascript

remove select option on Pocket IE

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) {...

Javascript

Remove Selected Item from list

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...

Javascript

extending a select list

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...

Javascript

Problem to transfer multiple value from select box

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...

Javascript

cleanup a select/options list - remove same items.

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...

Javascript

<select>.remove() Performance and Necessity

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...

Javascript

Easy Steps to Fix "Canon Printer Won't Connect to WiFi Network"

by: taylorcarr | last post by:

A Canon printer is a smart device known for being advanced, efficient, and reliable. It is designed for home, office, and hybrid workspace use and can also be used for a variety of purposes. However,...

General

How to turn on java script in a villaon keypad mobile phone

by: Charles Arthur | last post by:

How do i turn on java script on a villaon, callus and itel keypad mobile phone

Java

Batch import of multiple excel files into the database

by: ryjfgjl | last post by:

If we have dozens or hundreds of excel to import into the database, if we use the excel import function provided by database editors such as navicat, it will be extremely tedious and time-consuming...

Data Management

Migrating Website to Cloud - Emmanuel Katto

by: emmanuelkatto | last post by:

Hi All, I am Emmanuel katto from Uganda. I want to ask what challenges you've faced while migrating a website to cloud. Please let me know. Thanks! Emmanuel

General

Navigating the Data Structures and Algorithms (DSA)

by: BarryA | last post by:

What are the essential steps and strategies outlined in the Data Structures and Algorithms (DSA) roadmap for aspiring data scientists? How can individuals effectively utilize this roadmap to progress...

Algorithms / Advanced Math

Is that possible of reading the .csv file in column wise and the column have different lengths ?

by: Sonnysonu | last post by:

This is the data of csv file 1 2 3 1 2 3 1 2 3 1 2 3 2 3 2 3 3 the lengths should be different i have to store the data by column-wise with in the specific length. suppose the i have to...

C / C++

What is ONU?

by: marktang | last post by:

ONU (Optical Network Unit) is one of the key components for providing high-speed Internet services. Its primary function is to act as an endpoint device located at the user's premises. However,...

General

Changing the language in Windows 10

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...

Windows Server

Problem With Comparison Operator <=> in G++

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,...

C / C++