Below is an example of a script placed into a ‘note’ element, with the HTML button checked. The form has two lists, with nicknames ‘lista’ and ‘listb’. The first list has five items ‘A, B, C, D, E’, and the second list has three items, which could be anything.


<script type="text/javascript">

var oldListOptions = [];
window.onload = function () {
var listA = fm_get_form_item('lista');
var listB = fm_get_form_item('listb');
var opt;
listA.onchange = listChanges;
for(var x=0;x<listB.options.length;x++){
opt = new Option(listB.options[x].text, x, false, false);
oldListOptions.push(opt);
}
}

function listChanges() {
var listA = fm_get_form_item('lista');
var val = listA.options[listA.selectedIndex].text;

var listB = fm_get_form_item('listb');

listB.options.length = 0;
if (val == "A" || val == "B")
listB.options[listB.options.length] = new Option(oldListOptions[0].text, 0, false, false);
if (val == "A" || val == "C" || val == "D")
listB.options[listB.options.length] = new Option(oldListOptions[1].text, 1, false, false);
if (val == "D" || val == "E")
listB.options[listB.options.length] = new Option(oldListOptions[2].text, 2, false, false);
}

</script>

Important things to note:

  • the fm_get_form_item() function returns the DOM object associated with the nickname.
  • The options MUST associate the same values with the same texts.  That is, if the list only has the third option, its ‘value’ must still be 2 (counting from 0). This is because of the way Form Manager processes select boxes. The value of the list is supposed to be its index, starting from 0, within the list. So if your list contains the options “Apple, Orange, Banana”, then the value ‘0’ will always correspond to “Apple”, even if you changed the text via JavaScript to something like “Chateaubriand”.  So you will notice that each of the ‘if’ statements adds an option where the value (the second argument) reflects the index within the original list. Look up the Option constructor for more information about its arguments.