Tuesday, February 3, 2009

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.

2 comments:

kathleen.alliet said...

Hello,
I tried your example as followed :
I want to dynamically populate a choice list (which already has one value) with the text values of a lookup list on the same form. (which is limited by access rights)

The code below works great. But if I submit my form with one of the newly added choices selected, I get an 'unexpected error'.
Any idea as to why this is as such?
thx,

[code]
var x = getTagFromIdentifierAndTitle('select', 'DropDownChoice', 'myChoice');
var y = getTagFromIdentifierAndTitle('select','Lookup','Customer');
var opt;
if (y == null) {
var theInput = getTagFromIdentifierAndTitle("input","","Customer");
ShowDropdown(theInput.id); //this function is provided by SharePoint
opt=document.getElementById(theInput.opt);
}
else
{opt = y;}

var opts = opt.options;
var l = opts.length;
for (var i=0; i < l; i++) {

if (opts[i].value != 0)
{
var optNew = document.createElement('option');
optNew.text=opts[i].text;
optNew.value=i;
x.options.add(optNew);
}
}
[/code]

Jeff Lester said...

Thanks for the comment Kathleen,
I'm guessing that you can't have options that sharepoint doesn't know about.

for example, if you have drop down list with A,B,C. and you're saying the value should be D, sharepoint throws an error.

Try using a Choice box that allows for Fill in choices. That might fix it.