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:
[code=javascript]
// Get a <select> box with the ID 'mySelect'
elem = document.getEle mentById('mySel ect');

// Get a list of options in that select box
options = elem.options;

// See the amount of options in the list
alert(options.l ength);

// 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.getEle mentById('secon d').appendChild (clone);
[/code]

[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]

Two listboxes in javascript

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(inclu de 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]

[CODE=javascript]function fchange(member1 _ListBox1,membe r1_listbox2)
{
// Get a <select> box with the ID 'mySelect'
elem = document.getEle mentById('membe r1_ListBox1');

listbox2=docume nt.getElementBy Id(member1_list box2);

// 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.getEle mentById('membe r1_ListBox2').a ppendChild(clon e);
}
}


}

[/CODE]
In code behind
ListBox1.Attrib utes.Add("oncha nge", "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:
[code=php]
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
}
}
[/code]