Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 4 of 4
  1. #1
    New Coder
    Join Date
    Jul 2006
    Location
    Cincinnati, OH
    Posts
    85
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Click on a letter, go to the first occurance of that letter in a multiselect...

    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!

  • #2
    Senior Coder BarrMan's Avatar
    Join Date
    Feb 2005
    Location
    Israel.
    Posts
    1,644
    Thanks
    69
    Thanked 83 Times in 82 Posts
    Code:
    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;
    }
    }
    }
    Code:
    <a href="javascript:select('a');">a</a>
    ....
    etc till z
    ...
    <select name="some_name">
    <option>...</option>
    </select>

  • #3
    Kor
    Kor is offline
    Red Devil Mod Kor's Avatar
    Join Date
    Apr 2003
    Location
    Bucharest, ROMANIA
    Posts
    8,478
    Thanks
    58
    Thanked 379 Times in 375 Posts
    probably something like this:
    Code:
    <!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>
    KOR
    Offshore programming
    -*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*

  • #4
    New Coder
    Join Date
    Jul 2006
    Location
    Cincinnati, OH
    Posts
    85
    Thanks
    1
    Thanked 0 Times in 0 Posts
    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.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •