Multiple Select Listbox by Default 1

BakeMan · Jul 19, 2007

I have a select box on a page that is set to multiple select. In order to select more than one value you must hold down the Ctrl key. My users keep forgetting this. I am displaying a list to them that already has several things selected and they need to add more and save the form from time to time. Every time they go to the page they forget the Ctrl key and clear the whole list. They must then hit my Cancel button and re-enter the form to try again or try to remember all of the previous selections. Is there a way to change the select box so that it defaults to selecting more than one without holding the Ctrl key?

Thank you,
BAKEMAN [pimp]

BillyRayPreachersSon · Jul 19, 2007

Yes - this would do:

Code:

<html>
<head>
	<script type="text/javascript">

		var optionsState = [];

		function rememberState(selObj) {

			var opts = selObj.options;

			// Have we already populated our state array?
			if (optionsState.length == 0) {
				// No - so do so now
				for (var loop=0; loop<opts.length; loop++) {
					optionsState[loop] = opts[loop].selected;
				}
			} else {
				// Yes - so track the last change

				// First detect what item was clicked
				var clickedIndex = -1;
				for (var loop=0; loop<opts.length; loop++) {
					if (opts[loop].selected) {
						clickedIndex = loop;
						break;
					}
				}

				// Was that item already selected? If so, unselect it, otherwise, select it
				optionsState[clickedIndex] = !optionsState[clickedIndex];

				// Now re-populate the select element
				for (var loop=0; loop<optionsState.length; loop++) {
					opts[loop].selected = optionsState[loop];
				}
			}
		}

	</script>
</head>
<body>
	<form>
		<select multiple="true" size="15" onchange="rememberState(this);">
			<option>Option 1</option>
			<option>Option 2</option>
			<option>Option 3</option>
			<option>Option 4</option>
			<option>Option 5</option>
			<option>Option 6</option>
			<option>Option 7</option>
			<option>Option 8</option>
			<option>Option 9</option>
			<option>Option 10</option>
		</select>
	</form>
</body>
</html>

Click any item to select it, click again to unselect it.

Note: You might now want to put a notice underneath for users who do know how to use a multi-select element, explaining that you've re-defined the default behaviour and why - otherwise they might get a bit annoyed.

Hope this helps,
Dan

Coedit Limited - Delivering standards compliant, accessible web solutions

[tt]Dan's Page [blue]@[/blue] Code Couch

http://www.codecouch.com/dan/

[/tt]

BakeMan · Jul 19, 2007

That worked great! Thank you very much!

BAKEMAN [pimp]

Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Multiple Select Listbox by Default 1

BakeMan

Programmer

BillyRayPreachersSon

Programmer

BakeMan

Programmer

Similar threads

Part and Inventory Search

Sponsor