Sharepoint 2010 - Related fields in dropdowns. How to?

Question

In my UI I have a dropdown which contains some values: A, B, C. There is also another dropdown in the page whose values depend on the selected value in the first combo.

If I select A in the first field I need to display A1, A2, .... An options in the second.

If I select B in the first field I need to display B1, B2, B3, ..... Bm options in the second and so on.

The first combo is from a <Field type="Choice" />.

How can I manage this situation? Can I create another field for the second combo (A1, A2, .... An + B1, B2, B3, ..... Bm) and somehow filter them? Can I use lists instead and join them somehow?

Plus, I need to make this work in the client side (with javascript/jQuery) without performing extra requests to get the values.

What is the prefered way to handle this situation in SharePoint 2010?

Answer 1

You can do it in InfoPath, cascading drop downs. But since you said you need to do it in jQuery, there is a very useful library, called SPServices, available to assist. Marc has created a function in the library to do cascading drop downs, which is exactly what you want.

Look over that information and see if it's helpful.

Answer 2

Since you don't want to perform extra requests to get the values, it means that the relationship between the two fields must be present somewhere in the form page.

The way to do this would be to store this relationship in a SharePoint list:

|Title | Choice |

| A1 | A |

| B1 | B |

etc.

Add this list as a Web Part, hidden below your form. Then everytime a choice is selected in the parent (A, B, C) read the hidden list with JavaScript/jQuery and update the second combo accordingly.

I am afraid you won't find sample code for this, because people usually find AJAX requests just fine. Such a customization represents a lot of effort, and as PirateEric mentions a library like SPServices does the job for you. In my SP 2010 customizations, I prefer to use REST services because they are supposedly more efficient, but the idea is the same and requires at least one AJAX request.