Multiple select list without a keyboard

Nebooaw · Mar 3, 2005

Hi, i have a list/menu where i need to be able to select/deselect and multiple select items only by using a mouse, does anyone know how i can do this without using the "Ctrl" key on the keyboard?

Kindest thanks.

BillyRayPreachersSon · Mar 3, 2005

For some reason, I thought this would be easier than it was! The following works in FF 1, NN 7, and Opera 7. In fact, it should work in any browser that supports the onclick event for option elements - which does NOT include IE 6.

Code:

<html>
<head>
	<script type="text/javascript">
	<!--
		var selectMode = true;
		var selectedElements = [];

		function chooseOption(whichOption) {
			selectedElements[whichOption] = selectMode;
			var opts = document.forms['myForm'].elements['mySelect'].options;
			for (var loop=0; loop<opts.length; loop++) opts[loop].selected = false;
			for (var loop=0; loop<selectedElements.length; loop++) opts[loop].selected = selectedElements[loop];
		}
	//-->
	</script>
</head>

<body>
	<form name="myForm">
		<select name="mySelect" size="10" multiple="multiple">
			<option onclick="chooseOption(this.index);">Option 1</option>
			<option onclick="chooseOption(this.index);">Option 2</option>
			<option onclick="chooseOption(this.index);">Option 3</option>
			<option onclick="chooseOption(this.index);">Option 4</option>
			<option onclick="chooseOption(this.index);">Option 5</option>
			<option onclick="chooseOption(this.index);">Option 6</option>
			<option onclick="chooseOption(this.index);">Option 7</option>
			<option onclick="chooseOption(this.index);">Option 8</option>
			<option onclick="chooseOption(this.index);">Option 9</option>
			<option onclick="chooseOption(this.index);">Option 10</option>
			<option onclick="chooseOption(this.index);">Option 11</option>
			<option onclick="chooseOption(this.index);">Option 12</option>
			<option onclick="chooseOption(this.index);">Option 13</option>
			<option onclick="chooseOption(this.index);">Option 14</option>
			<option onclick="chooseOption(this.index);">Option 15</option>
		</select>
		<br />
		<input type="radio" name="selectStyle" checked="checked" onclick="selectMode = true;" />Select<br />
		<input type="radio" name="selectStyle" onclick="selectMode = false;" />Unselect<br />
	</form>
</body>
</html>

Hope this helps,
Dan

BillyRayPreachersSon · Apr 28, 2005

Nebooaw,

I'm just wondering if this worked for you as intended. You never did get back to say...

Dan

[tt]D'ya think I got where I am today because I dress like Peter Pan here?[/tt]
[banghead]

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 list without a keyboard

Nebooaw

Programmer

BillyRayPreachersSon

Programmer

BillyRayPreachersSon

Programmer

Similar threads

Part and Inventory Search

Sponsor