Creating a dropdown list in SharePoint designer is actually a lot easier than you may think, by following these simple steps I will show you how easy it can actually be.

Start off by creating a new Contacts List and call it Contacts, then add a few entries to that list or if you have a list that you wish to use then feel free to use that.  Ideally you will want to have a reference ID and the content to put into the dropdown list. This is usually one field in the list (or a concatenation of multiple fields) and the ID of the item.

Using SharePoint Designer 2007 open the site and create a new .aspx page to put your content into. Firstly we will delete everything on the page, and add the following lines.

<%@ Page masterpagefile="~masterurl/default.master" title="HelloDropdown" inherits="Microsoft.SharePoint.WebPartPages.WebPartPage, Microsoft.SharePoint, Version=12.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" meta:webpartpageexpansion="full" meta:progid="SharePoint.WebPartPage.Document" %>
<asp:Content runat="server" contentplaceholderid="PlaceHolderMain">
</asp:Content>

This will give us a basic SharePoint page which we can now add content. SharePoint Designer requires you to click in the Design section of the page to place Data View Web Parts. Click in the PlaceHolderMain section and then go to the Data View Menu and then Manage Data Sources. In the Data Source Library navigate to the list you wish to use for the drop down. Left click on the list and select Show Data, and then pick the field you wish to show in the drop down (in my example I have used the Title field). Then from the Insert Selected Field as button select Multiple Item View.

You should now be greeted with the familiar DVWP with your field and all the items being displayed on the page. Now to perform some magic using the Common Data View Tasks (the little chevron by the DVWP) select Data View Properties and then select Layout, finally scroll down to the view that looks like a drop down (it’s named dropdown menu of titles). Click yes to the warning message, it’s just warning us about the loss of any connections or custom changes to the web part.

Congratulations you now have a dropdown menu, save the page and then press F12 to preview the page. It will display all of the elements from the field you have selected, so what next?

Currently there is no way of identifying the field from anything else, so let’s try adding in an ID to the dropdown so we can link things together so we will need to look for the following lines of code.

<xsl:template>
  <option>
    <xsl:value-of select="@Title" />
  </option>
</xsl:template>

This section of the XSL is adding the items to the dropdown list. We need to add an ID to the list so we can then use that to directly refer to the item by an ID.
Change the lines of code above to the following.

<xsl:template>
  <option>
    <xsl:attribute>
      <xsl:value-of select="@ID"/>
    </xsl:attribute>
    <xsl:value-of select="@Title" />
  </option>
</xsl:template>

Now save the page and preview (F12) the list again, now each item will have an associated value. This is essential later when you have lookup fields that you may wish to filter against. To see this you can view the page source and find the <select> element and notice that the <option> elements will have a value attribute which will be the items ID from SharePoint.

In the next part I will show you how we can link the drop down list to filter other web parts on the page.