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!
-
Congratulations SkipVought on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!
multiple select 2
- Thread starter cschaffer
- Start date
- Thread starter
- #3
-
2
- #4
The box you've seen is probably like a "Simple" listbox (as opposed to an "Extended" listbox) that you would see in a program like Microsoft Access. The web page version is not as flexible. You could click and drag to select multiple options, but to be able to select non-consecutive options you would have to create your own select box. I created and tested this in IE 5.5:
______________________________________________________________________________________________________________________________________ Adam
Code:
<html>
<head>
<style>
.customSelect{
border: inset;
font-family: MS Sans Serif;
font-size: 80%;
width: 0%;
cursor: default;
}
</style>
<script>
function toggleHighlight(div,sel,num){
option=document.f[sel][num]
div.style.color=(option.selected ? 'black':'highlighttext');
div.style.backgroundColor=(option.selected ? 'white':'highlight');
option.selected=!option.selected;
}
</script>
</head>
<body>
<form name="f">
<span class="customSelect">
<div onclick="toggleHighlight(this,'myselect',0)" onselectstart="return false"><nobr>Option 1</nobr></div>
<div onclick="toggleHighlight(this,'myselect',1)" onselectstart="return false"><nobr>Option 2</nobr></div>
<div onclick="toggleHighlight(this,'myselect',2)" onselectstart="return false"><nobr>Option 3</nobr></div>
</span>
<select name="myselect" multiple style="display:none">
<option value="Value 1">
<option value="Value 2">
<option value="Value 3">
</select>
<input type="submit">
</form>
</body>
</html>One addition, you should add style="width:100%" to the divs Adam
Adam,
that is a brilliant solution...i had been trying to figure out how to code this type of multiple select for a while. never would have thought to use a hidden multiple select in a hundred years.
i had been trying to alter the select directly with script, and the problem that i was stuck on was getting the index of the option that received the click - your method renders this unnecessary! =========================================================
if (!succeed) try();
-jeff
that is a brilliant solution...i had been trying to figure out how to code this type of multiple select for a while. never would have thought to use a hidden multiple select in a hundred years.
i had been trying to alter the select directly with script, and the problem that i was stuck on was getting the index of the option that received the click - your method renders this unnecessary! =========================================================
if (!succeed) try();
-jeff
- Thread starter
- #7
- Status
Similar threads
- Locked
- Question