Cascading lookups in SharePoint using jQuery
One common request in SharePoint is the ability to cascade lookups when completing a list form. For example, let’s say you have two drop down fields on your form. One is the State and the other is the City. You want the user to be able to select a State and then the City drop down should automatically show the valid cities for that state.
In the past we have used a couple of approaches to solving this problem. Either building custom forms or using a 3rd party utility such as the Bamboo List Selector. Building a custom form just to provide this functionality is overkill and can easily cause more problems than it is worth. The Bamboo List Selector works fine, but requires deploying to the server and a bit of configuration.
Today, with the help of jQuery, we have another option that requires no code deployment and very minimal configuration. SPServices jQuery Library for SharePoint Web Services uses jQuery along with SharePoint’s Web Services to make the solution very easy.
Here is a quick overview of the steps:
- Now you need to setup your data if it is not already. You should have at least three lists. Here is a quick example.
- Create a “States” list with only the Title column. You can add a few states to get started.
- Create a “Cities” list with the Title column and an additional lookup column that does a lookup to the States list. Add a few cities for each state.
- Create another list that has a lookup to the States list and another lookup column to the Cities list. (The Title field in both)
- The next step is to the add the actual jQuery that will make all of this functional. It is recommended that this be added directly to the page using SharePoint Designer or some other means. But a Content Editor web part works as well. Just keep in mind that a Content Editor web part is more accessible to users.
- In the main list click on New and you will be taken to the “New Item” form. You will need to add a Content Editor Web Part to this page. To do this through the UI you need to add “ToolPaneView=2” at the very end of the URL in the address bar.
When you save your changes, your state drop down should filter the city drop down.