SharePoint: Convert a Links list to a Dropdown list

 

This article has been updated to include support for both SharePoint 2007 and 2010 and for better multiple browser support.  Click HERE for the updated version.

 

Problem: There is never enough room on your SharePoint home page. So what do you do if you have a long list of vendor links you would like to display on the home page. You would usually use a Links list and add a Links list web part. But it takes up too much space. How about a simple dropdown list?

    

Solution: Yet another Content Editor Web Part (CEWP) trick!  A CEWP and some JavaScript…

  

                                   

Steps:

• Create your links list and add your links
• Add the link list’s web part to the page
• Add a Content Editor Web Part (CEWP) to the page just under the links list web part
• Modify the CEWP and set a title then click Source Editor
• Copy and paste the HTML and JavaScript below
• Edit the JavaScript to change the word “Links” to the name of your links list web part (title of the web part, not the title of the actual list, although they may be the same)
    if (x(i).summary=="Links")     to
    if (x(i).summary=="Your Links List Title")
• Exit the edit mode and see if it works

The HTML and JavaScript for the CEWP:

<select name="JumpToList"
    onchange="javascript:JumpToUrl(this(this.selectedIndex).value)">
  <option>Jump to ...</option>
</select>

<script>
// CEWP trick from techtrainingnotes.blogspot.com! 

function JumpToUrl(url)
{
    document.location.href = url
}

//code to hide the links list and populate the select list

//Find the link list and hide it
var x = document.getElementsByTagName("TABLE") // find all of the Tables 
  var LinkList
  var i=0;
  for (i=0;i<x.length;i++) 
  {
    if (x(i).summary=="Links")
    {
      //
      LinkList = x(i)
      //hide the links list web part (tables in tables in tables ...)
      x(i).parentNode.parentNode.parentNode.parentNode.parentNode.parentNode.parentNode.parentNode.parentNode.style.display="none"
     } 
  }

//Copy all of the links from the link list to the select list
var ToList = document.all("JumpToList")

var links = LinkList.getElementsByTagName("A") // find all of the 
  for (i=0;i<links.length;i++) 
  {
ToList.options[ToList.length] = new Option(links(i).innerHTML, links(i).href);
  }

</script>

 

 

.