Dynamic multi selection box

JavaScript and client side scripting.

Moderator: General Moderators

Post Reply
mathewvp
Forum Commoner
Posts: 28
Joined: Wed Apr 23, 2003 10:28 am

Dynamic multi selection box

Post by mathewvp »

Hi,

I have a combo box which contains a no of values.On selecting any of these values and clicking a button,the selected value should get added to a multi select list(dynamically).And on selecting any value from the multi selection list and clicking another button ,the selected value should get removed from the multi selection list.Can anybody help.
User avatar
patrikG
DevNet Master
Posts: 4235
Joined: Thu Aug 15, 2002 5:53 am
Location: Sussex, UK

Post by patrikG »

I've had the same problem some time ago -here is what I came up with. If I remember correctly, this one only works in IE.

form-name is "alerts"

Code: Select all

function addToSelect(selectList,newOption,newValue)
	{
	for (i=1;i<document.forms.alerts&#1111;selectList].options.length;i++)
		&#123;
		if (document.forms.alerts&#1111;selectList].options&#1111;i]==newOption || document.forms.alerts&#1111;selectList].options&#1111;i].text==newValue)
			&#123;document.forms.alerts&#1111;selectList].options&#1111;i] = new Option(newOption,newValue); return;&#125;
		&#125;
	document.forms.alerts&#1111;selectList].options&#1111;document.forms.alerts&#1111;selectList].options.length] = new Option(newOption,newValue);
	&#125;

function deleteSelect(selectList,deleteOption)
	&#123;
	for (i=1;i<document.forms.alerts&#1111;selectList].options.length;i++)
		&#123;
		if (document.forms.alerts&#1111;selectList].options&#1111;i]==deleteOption || document.forms.alerts&#1111;selectList].options&#1111;i].text==deleteOption)
			&#123;document.forms.alerts&#1111;selectList].options&#1111;i] = null; return;&#125;
		&#125;
	&#125;

function updateSelect(selectList,oldOption,updateText,updateOption)
	&#123;
//	selectList="document.forms.alerts&#1111;selectList]";
	for (i=1;i<document.forms.alerts&#1111;selectList].options.length;i++)
		&#123;
		if (document.forms.alerts&#1111;selectList].options&#1111;i]==oldOption || document.forms.alerts&#1111;selectList].options&#1111;i].text==oldOption)
			&#123;
			document.forms.alerts&#1111;selectList].options&#1111;i].text = updateText;
			if (!updateOption)
				updateOption=updateText;
			document.forms.alerts&#1111;selectList].options&#1111;i].value = updateOption;
			return;
			&#125;
		&#125;
	&#125;

Alternatively, have a look at JavaScript Toolbox, especially Dynamic Options List, Selectbox Functions and Option Transfer.

That stuff is definitely cross-browser.
Post Reply