...

View Full Version : Click on a letter, go to the first occurance of that letter in a multiselect...



justincredible
02-20-2007, 12:02 AM
I have a multiselect box that displays 15 items in the box. I have a row of divs underneath with the letters A through Z, one letter per div. I want the users to be able to click on a letter and then the multiselect will go to the first occurance of an value that begins with that letter. It does not need to select that item but if it has to that is no problem. It just needs to have that first item as the top element in the list.

I tried a quick search online for it but I couldnt get my wording to get me anything useful. Anyone have any examples of this or can point me in a spot that I might find an example? Thanks!

BarrMan
02-20-2007, 10:48 AM
function select(letter)
{
var obj = document.all.some_name, tempVal;
for(var i=0;i<obj.length;i++)
{
tempVal =obj.options[i].value.substring(0,1);
if(tempVal == letter)
{
obj.options[i].selected = true;
break;
}
}
}

<a href="javascript:select('a');">a</a>
....
etc till z
...
<select name="some_name">
<option>...</option>
</select>

Kor
02-20-2007, 11:01 AM
probably something like this:


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta http-equiv="Content-Style-Type" content="text/css">
<meta http-equiv="Content-Script-Type" content="txt/javascript">
<style type="text/css">
#mydiv span{
cursor:pointer;
}
</style>
<script type="text/javascript">
function sel(v){
var fv=v.substring(0,1).toLowerCase();
var allOpt=document.getElementById('mysel').getElementsByTagName('option');
var i=0, o, fo
while(o=allOpt[i++]){
fo=o.text.substring(0,1).toLowerCase();
if(fo==fv){
o.selected=true;break
}
}
}
onload=function(){
var allSpans=document.getElementById('mydiv').getElementsByTagName('span');
var i=0, s
while(s=allSpans[i++]){
s.onclick=function(){
sel(this.firstChild.nodeValue)
}
}
}
</script>
</head>
<br>
<select id="mysel">
<option value="apple">apple</option>
<option value="banana">Banana</option>
<option value="carrot">carrot</option>
</select>
<div id="mydiv"><span>A </span><span>B </span><span>C </span></div>
</body>
</html>

justincredible
02-20-2007, 04:15 PM
Thanks to both of you! Kor, your code worked great.

Now I need to figure out a way for the selected item to be the first(top) item in the listbox.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum