Wednesday, May 03, 2006

Dynamic Selection List

I need to build two select options (dialog list). The list in the second dialog list will change according to the first dialog list selection.

Using Lotus Notes, it can be done by using "Refresh fields on keyword change" in the first field Control tab. The second field will be computed (Formula) according to the first field. Checked on "Refresh choices on document refresh". This works fine but it will refresh the whole page.

To prevent any refresh, you can use javascript to change the selection.

For an example, if I select "One" from the first select box (SelectOne), the second select box (SelectTwo) list will be "1" and "ii".
If selectOne = "Two" then SelectTwo = "2" and "ii".
If selectOne = "Three" then SelectTwo = "3" and "iii".

Create two Dialog List field name SelectOne and SelectTwo.

In the SelectOne field, enter choices (One, Two, Three)

In the SelectTwo field, enter choices (1, i). This is because be default SelectOne is "One" thus SelectTwo should be ("1", "i")

In SelectTwo onChange add the javascript
changeSelection(this)

Insert the sample JS Array in the JS Header
var dataEl = new Array( ["One", ["1","i"]], ["Two", ["2","ii"]], ["Three", ["3","iii"]] );

Add a simple function to change the SelectTwo list in the JS Header

function changeSelection(element){
for(var i=0; i<dataEl.length; i++){
if(dataEl[i][0] == element[element.selectedIndex].text){
//clear list
var tmpLength = document.forms[0].SelectorTwo.options.length
for(var j=0; j<tmpLength; j++)
document.forms[0].SelectorTwo.options[0] = null;

//build list
for(var j=0; j<(dataEl[i][1].length); j++){
var no = new Option();
no.value = dataEl[i][1][j]; //set the option value
no.text = dataEl[i][1][j]; //set the option text
document.forms[0].SelectorTwo.options[document.forms[0].SelectorTwo.options.length] = no;
}
return;
}
}
}

This example used a simple fixed JS Array. A computed field can also be used to generate the Array. For a dynamic list, you can use a view and embedded it into a page and saved as a .js file. If the list is ever changing, you could use AJAX to lookup to for the selection list and then only update it into the field.

Updates (1st June 2006):
I have created a new post where you the dynamic selection can be updated using Ajax and @DbLookup formula. Check out the write up here.

1 comment:

Anonymous said...

can any one help me ,...
I have teo dialog list box.
When i am selecting first one i can fetch the secong dialog list box value..
But if i refresh the page... i am not able to refresh dialog list value...