Add/remove options from list box based on selection in another list box

[ramani253]

Hai.i am new to javascript coding.i have two listboxes.when the user selects items in first listbox .it has to be removed from second listbox.if he unselects it has to be added again.please help me

[Atli]

Hi.

You could create the two boxes and populate the first one with the options you want.
Then you could create a function that clones each unselected option from the first box into the second box, and have the first box's onchange event trigger the function.

This may come in handy when writing that function:

// Get a <select> box with the ID 'mySelect'
elem = document.getElementById('mySelect');
 
// Get a list of options in that select box
options = elem.options;
 
// See the amount of options in the list
alert(options.length); 
 
// See whether the fist option in the list is selected
alert(options.[0].selected) 
 
// Clone the first option and add it to another <select> box
var clone = options[0].cloneNode(true);
document.getElementById('second').appendChild(clone);
 

[ramani253]

Thank u .Code is very helpful to me.

i have one more constrainst .we have to do vice versa.

User can select from second list box that has to be removed from first list box.

before adding to the second list box i have to check whether that list item already exist or not.

[ramani253]

I have two listboxes.when the user selects items in first listbox .it has to be removed from second listbox.if he unselects it has to be added again.

i have one more constrainst .we have to do vice versa.

User can select from second list box that has to be removed from first list box.

before adding to the second list box i have to check whether that list item already exist or not.

Thank u for reply

[stepterr]

I have two listboxes.when the user selects items in first listbox .it has to be removed from second listbox.if he unselects it has to be added again.

i have one more constrainst .we have to do vice versa.

User can select from second list box that has to be removed from first list box.

before adding to the second list box i have to check whether that list item already exist or not.

Thank u for reply

ramani253,
Do you have any of this coded yet? If so what is happening? How are you filling the list boxes. For example, are they hard coded values or are you filling them from a database?

[ramani253]

Iam filling from database
Binding the listbox to datatable which is server side.


intially the two listboxes(include and exlude ) will have same items.

after the selects the items it has to be removed from other list box.



how we write in javascript code to check if that item exists or not.

before adding to second listbox .

[ramani253]

function fchange(member1_ListBox1,member1_listbox2)
    {
            // Get a <select> box with the ID 'mySelect'
        elem = document.getElementById('member1_ListBox1');
 
        listbox2=document.getElementById(member1_listbox2);
 
        // Get a list of options in that select box
        options = elem.options;
 
 
        for (var i=0;i< elem.length;i++)
        {
        if (elem.options[i].selected)
        {
         //remove item from second listbox     
        }
        else
        {
        var clone = options[i].cloneNode(true);
 
        //Here Need to write code whether item exist or not 
        document.getElementById('member1_ListBox2').appendChild(clone); 
        }
        }
 
 
    }
 
 

In code behind
ListBox1.Attributes.Add("onchange", "fchange()");

[ramani253]

Is it possible to check value in second list box

[acoder]

Threads merged. Please do not double post you questions. Also please use code tags when posting code. Thanks!

Moderator.

[Atli]

You want the second box to have the same items as the first box, except those that are selected, right?

Why not then just clear the second box and then add ever non-selected item to it from the first box?

In other words:

while( second box has options )
{
  remove the first option
}
 
for( every item in the first box ) 
{
  if( the current item is NOT selected )
  {
    Create a clone of the current item
    Add the clone to the second box
  }
}