Javascript HTML Select - Multiple Select

Simple Javascript code to set multiple selections in an HTML Select element - The first step is that the select must be set up to allow multiple selections, that is it must have the attribute multiple="multiple". Second, we need some supporting code to find the position of a value in an array - if you are using Prototype or limiting your usage to newer browsers you may not have to roll your own here as indexOf will be a method of the Array object. Otherwise you are going to need this:

	function indexOf(array, value) {
	for (var i = 0, l = array.length; i < l; ++i) {
	if (array[i] === value) return i;
	}
	return -1;
	}

view raw gistfile1.js hosted with ❤ by GitHub

Now the code to set the selections. You pass in the select element, an array of selections, and an optional boolean. The boolean defaults to false and indicates whether or not to invert the selection:

	function setSelectedByValue(select, values, invert) {
	invert = invert || false;
	var options = select.options;
	for (var i = 0, l = options.length; i < l; ++i) {
	var option = options[i];
	var value = option.value;
	option.selected = (indexOf(values, value) === -1) === invert;
	}
	}

view raw gistfile1.js hosted with ❤ by GitHub

Now for a little demo:

	Bread Cheese Donuts Eggs Milk
Values:
Invert: