Dynamic drop down lists on Forms

Often, customers want options in one field to be driven by a different field in the form. For example, Categories and sub-categories. If the user picks A in field 1, field 2 should be filtered to only show options A1,A2,A3, etc.

Since sharepoint doesn't have a good way to do this, and I dont want to build a custom user control, javascript is the solution.

First, you'll want to create a function to clear out all the options from the second drop down list. Something like:

function clearSubCat(){

var subCat = getTagFromIdentifierAndTitle("select","DropDownChoice","Sub-Category");

var opts = subCat.options;

var len = subCat.length;
for (i = 0; i <len; i++)
{
subCat.remove(0);
}
}


If you google getTagFromIdentifierAndTitle, you'll find a nice blog article and the source for this function.

Second, you'll need a function to re-populate the drop down list given the value of colum 1:

function populateSubCat(){
var subCat = getTagFromIdentifierAndTitle("select","DropDownChoice","Sub-Category");
var catList = getTagFromIdentifierAndTitle("select","DropDownChoice","Category");

var cat = catList.options[catList.selectedIndex].text;

clearSubCat();
switch(cat)
{
case "Directives":
var optA = document.createElement('option');
optA.text = "DOI";
optA.value = "DOI";
subCat.options.add(optA);

}
}

You'll have to add more cases to the switch statement.
Basically, this gets the DOM object for the two categories, and inserts values into the sub-category based on the value in the category.

Third, you'll want to setup the javascript to set the onChange event for the Category drop down list.

function filterSubCat(){
var catList = getTagFromIdentifierAndTitle("select","DropDownChoice","Category");
catList.onchange = function() {populateSubCat()};
populateSubCat();
}


I call the filterSubCat() function in a content editor webpart.


In my case, the Drop down list values were limited and Static. If your lists are more dynamic this may not be the best solution.