Retaining Selections From A Single Select Box In Two Multiple Select Boxes Via JavaScript / DOM

Recently asked on Yahoo! Answers:

Question on Java script?

I have one html page which contain one select and two multi select box.when I select something from select menu(Ex:a,b,c) the corresponding items(a1,a2,a3….or b1,b2,b3….) arecoming in multiselect box.from the first multiselect box1 i am able to transfer the selected datas to multiselect box2.My problem is to retain the datas that are in the multiselect boxes for a particular selction in select box.These values should retain when every time I circulate through the select items.How will I do that.

I assume from this question what the user wants is this:

  • A single-choice select box (combo box) is displayed; it has several options.
  • Two additional multiple select boxes (list boxes) are displayed; they have some combination of options which match the choices in the combo box. (For the purposes of this example, I’ll add a value in one of these list boxes that doesn’t appear in the combo box. Also, the items in the two list boxes won’t be the same; one will match all available options in the combo box; the second, only a few.)
  • As the user makes choices with the combo box, the corresponding options in the list boxes are highlighted; every time a new selection is made in a combo box, that selection is also selected in the matching list box options. Previously selected items are never removed. (For the purpose of this demo, I will add a button that clears all previous selections in a fell swoop.)

The technique here is very straightforward; we simply use a global array to store all the choices made so far from the combo box, then use that array to choose what is selected in the list boxes.

The HTML Form

As usual, we begin with the form. It contains the combo box and the two list boxes in a named form; I used a table to line them up, but you should use XHTML (I’m in a hurry, so design gets a bit of a backseat).

The combo box will have an onchange event associated with it, to trigger when we make a new selection:

The JavaScript

To begin the JavaScript, we declare a global array, which we will name selectA. As I previously noted, this global will store all the selections we have made so far from the combo box:

var selectA = new Array();

On to the onchange function, addItemToMultis(), that we assigned to our combo box. It begins by getting the selected value of the combo box:

function addItemToMultis() {
	var currentValue = document.myform.myselect.options[document.myform.myselect.selectedIndex].value;

Next, we declare some variables: i and x are simple looping counters; found is a boolean that will determine if we’ve already selected an item from the combo box; multiA and multiB are new objects we’ll make from the two list boxes, just to make referencing the form items (DOM elements) easier.

	var i;
	var x;
	var found = false;
	var multiA = document.myform.mymultiA;
	var multiB = document.myform.mymultiB;

We need to loop through all the options in the global selectA array. Does the current selection match any item in the global array? If so, there’s no need to add the item to the global array; if not, we need to add it, which we do with push().

	for(i = 0; i < selectA.length; i++) {
		if(selectA[i] == currentValue) {
			found = true;
			break;
		}
	}

	if(found == false) {
		selectA.push(currentValue);
	}

With our global array in order, we can now sort through both list boxes. We iterate first through the array, then the items in the list box; if we can match a value in the global array to an option in the list box, we select that option.

Yes, it's that easy!

	for(i = 0; i < selectA.length; i++) {
		for(x = 0; x < multiA.options.length; x++) {
			if(multiA.options[x].value == selectA[i]) {
				multiA.options[x].selected = true;
			}
		}
	}

	for(i = 0; i < selectA.length; i++) {
		for(x = 0; x < multiB.options.length; x++) {
			if(multiB.options[x].value == selectA[i]) {
				multiB.options[x].selected = true;
			}
		}
	}
}

Note the second list box has an item, fuscia, that does not appear in the combo box. Thus, any time we make a selection from the combo box, that item will be deselected, if it is selected; and it will never be selected by any choice we make in the combo box.

Finally, we need a function to handle clearing all the list box items, and resetting the combo box to its default value of nothing, when the "Clear all lists" box is clicked.

That's as simple as iterating through each list box, setting each option's selected value to false; setting the combo box's selected index to 0; and redeclaring the selectA array, to clear all of its values.

function clearAllValues() {
	var i;
	var multiA = document.myform.mymultiA;
	var multiB = document.myform.mymultiB;
	document.myform.myselect.selectedIndex = 0;

	for(i = 0; i < multiA.options.length; i++) {
		multiA.options[i].selected = false;
	}

	for(i = 0; i < multiB.options.length; i++) {
		multiB.options[i].selected = false;
	}

	selectA = new Array();
}

That's it!

You can see a working demo of this at:

http://www.dougv.com/demo/keep_selected_values_js/

All you need to do is save the HTML to your computer and hack the code to your heart's content.

As always, I distribute code under the most recent version of the Creative Commons Attribution / Share-Alike License.

One thought on “Retaining Selections From A Single Select Box In Two Multiple Select Boxes Via JavaScript / DOM

  1. Siba

    I have one select box and two multiselect box .when i select a item(let it be A) in select menu then it shows a1,a2,a3,a4,a5,a6 in first multiselect box.I have two buttons which are used to move the items between two multiselect box.suppose I moved a5 and a6 to second multiselect box.So now there is only 4 items in first multiselect box and two in second multiselect box. At this moment suppose I select another item in select box (Let it be B) then it will show the corresponding items (i.e b1,b2,b3,b4,b5..)in first multiselect box and nothing should be there in second multiselect box.So again when I select A in the select menu it should show me the previous values i.e. four items in first(a1,a2.a3,a4) and two item(a5,a6) in second multiselect box.

Leave a Reply