Link to home
Start Free TrialLog in
Avatar of saoirse1916
saoirse1916Flag for United States of America

asked on

Marking an option as "Selected"

I've got an application that uses JavaScript to create a series of dynamic dependent listboxes.  It's working great but I'd like to be able to preserve the selected options in the event of an error.  Basically, I've got a VBScript function which stores the form fields to a database and then one which recalls that information on the redirected page so that the user submitted values can be preserved.

Here's what I've got for the JavaScript that creates the select options:

function setDynaList(arrDL){
 var oList1 = document.forms[arrDL[2]].elements[arrDL[1]];
 var oList2 = document.forms[arrDL[4]].elements[arrDL[3]];
 var arrList = arrDL[5];
 
 clearDynaList(oList2);
 
 if (oList1.selectedIndex == -1){
  oList1.selectedIndex = 0;
 }
 populateDynaList(oList2, oList1[oList1.selectedIndex].value, arrList);
 return true;
}
 
function clearDynaList(oList){
 for (var i = oList.options.length; i >= 0; i--){
  oList.options[i] = null;
 }
 
 oList.selectedIndex = -1;
}
 
function populateDynaList(oList, nIndex, aArray){
 for (var i = 0; i < aArray.length; i= i + 3){
  if (aArray[i] == nIndex){
   oList.options[oList.options.length] = new Option(aArray[i + 1], aArray[i + 2]);
  }
 }
 if (oList.options.length == 0){
  oList.options[oList.options.length] = new Option("[none available]","");
 }
 
 oList.selectedIndex = 0;
}

function MM_callJS(jsStr) { //v2.0
  return eval(jsStr)
}

Those functions are called in the HTML like so:
<select name="formBuilding" id="formBuilding" onChange="MM_callJS('setDynaList(arrDL1)')">
     <option value="">Please Select</option>
     <option value="1">Option 1</option>
     <option value="2">Option 2</option>
     <option value="3">Option 3</option>
</select>
<select name="formSpace" id="formSpace" onChange="MM_callJS('setDynaList(arrDL2)')">
</select>
<select name="formSuite" id="formSuite">
</select>

So in this case, formBuilding is the parent to formSpace, which in turn is the parent to formSuite.  In the event of an error, such as the user leaving a field blank, I'd like to apply selected="selected" to the user-selected item.

Thanks to anyone who can help!
Avatar of HonorGod
HonorGod
Flag of United States of America image

When you modify the selectedIndex attribute of a SELECT element, the "proper" option is selected.

Note: This only works for single select, not multiple select elements.
Avatar of saoirse1916

ASKER

I'm not sure what you mean -- could you post a code sample?  I'm terrible at JavaScript.
sure.  Sorry.

Where would the code be that identifies the options to be selected?
It's in VBScript, but as an example, here's what I do:

<option value=""<% If CStr(checkData("formAssetType","")) = "" Then %> selected<% End If %>>Please Select</option>

"checkData" is a function that looks at the redirected data "formAssetType" and if there's a value there it uses it as it's matching criteria -- otherwise it looks to the second value which in this case is blank.
So basically, I need that code to be included in the above JavaScript which dynamically writes the select and it's options.
The problem is that after the VBscript executes, the Document Object Model (DOM) of the page doesn't look like that anymore.

If you look at the page source (in the browser, if you right-click on the page, "view source" or something like it).  The question though is:

Does this source reflect the actual DOM after the script changes, or not?


Well, I don't have that VBScript in the page at the moment -- the JavaScript is currently called from an external .js file.  So, perhaps I should stick that .js code into the page itself and use VBScript to do the if/then check -- but assuming I do that, how would I modify the JavaScript to reference that "selected" option?

If I do this, for example (keeping in mind that I don't know much about JS)...

function populateDynaList(oList, nIndex, aArray){
 for (var i = 0; i < aArray.length; i= i + 3){
  if (aArray[i] == nIndex){
   oList.options[oList.options.length] = new Option(aArray[i + 1], aArray[i + 2]);
  }
 }
 if (oList.options.length == 0){
  oList.options[oList.options.length] = new Option("[none available]","");
 }
 
<%
If CStr(checkData("formAssetType","")) = [somehow need to get the current JS option item in the arrray here] Then
     --JS code to identify the item as "selected"
End If


 oList.selectedIndex = 0;
}
The JavaScript code to identify an item is selected is as simple as:

For example, if index has a value of 3, the 4th element (remember container indexes start at 0) will be selected...
olist.selectedIndex = index

Open in new window

For example:
<html>
<body>
 
<select id='here'>
  <option>Pick...</option>
  <option>Uno</option>
  <option>Dos</option>
  <option>Tres</option>
</select>
 
<script type="text/javascript">
document.getElementById( 'here' ).selectedIndex = 2
</script>
 
</body>
</html>

Open in new window

It seems that my question is really about how to properly integrate a VBScript if/then with this JavaScript.  I've got the initial drop down set to preserve the first selected item (the parent, formBuilding) purely through VBScript but now I need to figure out how to do the same with the VBScript dependent drop down (child, formSpace) after a redirect.  My form gets submitted to a processing page and if there's an error, it bounces back to the form page which is where I need to preserve the submitted value.

I'm still not clear on how I could use "olist.selectedIndex = index" to identify the selected item in a dynamically created list of options.
>> I'm still not clear on how I could use "olist.selectedIndex = index" to identify the selected item in a dynamically created list of options.

Given that "olist" is a reference to a "SELECT" element,
changing the selectedIndex value is the same as looping through the options to locate the entry in question, and changing it's selected attribute.

Does that make sense?

Does this help?
<html>
<head>
<script type="text/javascript">
function pick( id, index ) {
  var sel = document.getElementById( id )
  if ( sel ) {
    if ( sel.nodeName == 'SELECT' ) {
      if ( ( index > -1 ) && ( index < sel.options.length ) ) {
        sel.selectedIndex = index
      } else {
        alert( 'Invalid selection.  Must be 0..' + ( sel.options.length - 1 ) )
      }
    } else {
      alert( 'Unexpected element type: "' + sel.nodeName + '"' )
    }
  }
}
</script>
</head>
<body>
 
<select id='here'>
  <option>Pick...</option>
  <option>One</option>
  <option>Two</option>
  <option>Three</option>
  <option>Four</option>
  <option>Five</option>
</select><br>
Item #: <input type='text' size='1' onchange='pick("here",this.value)'>
 
</body>
</html>

Open in new window

Ok, I see.  So then in theory I could add this function to my onLoad event -- which is currently calling the dynamic drop down functions to pre-populate the lists -- but when I do that I'm getting a syntax error.  Here's what I'm doing...

<body onLoad="MM_callJS('setDynaList(arrDL1)');MM_callJS('setDynaList(arrDL2)');pick("formSpace",<%=checkData("formSpace","")%>)">

Open in new window

My html editor complains about the capital L in onLoad.  It want all lowercase.
But at least one browser (Chrome) doesn't care, and lets the string be executed.

Instead of having both JavaScript, and VBscript in the onload, you may want/need to call a single/simple function.

The "pick" call seems to have mismatched double-quotes though...
<head>
<script type='text/javascript'>
  function init() {
    MM_callJS('setDynaList(arrDL1)')
    MM_callJS('setDynaList(arrDL2)')
    pick("formSpace",<%=checkData("formSpace","")%>)"
  }
</script>
</head>
<body onload='init()'>

Open in new window

Now I'm getting two errors:
Error: syntax error
pick("formSpace",) -- pointing to the last close-parentheses

init is not defined

Not sure what I'm doing wrong here.
Actually, when I submit the form it does bounce back but it throws me a pop-up..."Invalid selection.  Must be 0..6".  I see where that's coming from in the function but it occurs to me that the function is looking for a JS index value, correct?  What I'm giving it is the actual value.  That's what my VBScript function is providing.
I believe that VBScript is replacing the

<%=checkData("formSpace","")%>

with the a value.

What happens if you change init() to something like:

Does it execute, and provide the expected "value = #" response?
  function init() {
    MM_callJS('setDynaList(arrDL1)')
    MM_callJS('setDynaList(arrDL2)')
//  pick("formSpace",<%=checkData("formSpace","")%>)"
    alert( 'value: ' +  <%=checkData("formSpace","")%> )
  }

Open in new window

It's throwing up the value of the selected item, not the index.  It's an integer value which is the unique ID of the record in the database.  Basically, it's the 123 in this value:

<option value="123">First Floor</option>

Based on that, I need to either write a VBScript function to look up what that index value *would* be on the checking page and store that value in the database for recall on the calling page, or have the JavaScript match that option value somehow.  I have no idea how to do that in JavaScript nor do I know if that would even be possible or a good idea.

What do you think?
No, now that we know what is being passed, we can change the pick() function to handle it.

How about something like this:
<script type="text/javascript">
function pick( id, val ) {
  var sel = document.getElementById( id )
  if ( sel ) {
    if ( sel.nodeName == 'SELECT' ) {
      var SI = -1
      for ( var i = 0; i < sel.options.length; i++ ) {
        if ( val == sel.options[ i ].value ) {
          sel.options[ i ].selected = true
          SI = i
          break
        }
      }
      if ( SI == -1 ) {
        alert( 'Specified value not found: ' + val )
      }
    } else {
      alert( 'Unexpected element type: "' + sel.nodeName + '"' )
    }
  }
}
</script>

Open in new window

ASKER CERTIFIED SOLUTION
Avatar of HonorGod
HonorGod
Flag of United States of America image

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
Interesting...it's saving the value perfectly now.  I also tried to apply the same concept to my other dynamic drop down (formSuite) but it's popping up an alert saying that the Specified value not found: and it's reporting the proper ID value just like it did for the first one (formSpace).  Here's what I did, perhaps I goofed something up.

Also, I'm still getting a JavaScript error in Firefox though it doesn't seem to be causing any significant problems:

Syntax error: pick("formSpace",)
init is not defined
<script type="text/javascript">
  function init() {
    MM_callJS('setDynaList(arrDL1)')
    MM_callJS('setDynaList(arrDL2)')
	pick("formSpace",<%=checkData("formSpace","")%>)
	pick("formSuite",<%=checkData("formSuite","")%>)
  }
</script>
<body onload="init()">

Open in new window

So, for the 1st (formSpace) it works, but for the 2nd (formSuite) it doesn't?

Do both of the Select groups have OPTION tags with value=?
What browser & version are you using?
I'm using Firefox 3.0.10 -- both select groups are dynamically created by the initial script that I posted, so they should be the same I suppose.
I wonder if this would work for you...
<script type="text/javascript">
function pick( id, val ) {
  var sel = document.getElementById( id )
  if ( sel ) {
    if ( sel.nodeName == 'SELECT' ) {
      for ( var i = 0; i < sel.options.length; i++ ) {
        if ( val == ( sel.options[ i ].value || sel.options[ i ].innerHTML ) ) {
          sel.options[ i ].selected = true
          break
        }
      }
      if ( i == sel.options.length ) {
        alert( 'Specified value not found: ' + val )
      }
    } else {
      alert( 'Unexpected element type: "' + sel.nodeName + '"' )
    }
  }
}
</script>

Open in new window

Hmm, didn't seem to make any difference.  Same errors and it still pops up saying that the value cannot be found -- yet it is reporting the correct unique ID for that suite.
How big a list?

If it't not too big, we can add an alert to the loop to show us what is being tested:



<script type="text/javascript">
function pick( id, val ) {
  var sel = document.getElementById( id )
  if ( sel ) {
    if ( sel.nodeName == 'SELECT' ) {
      for ( var i = 0; i < sel.options.length; i++ ) {
        var data = sel.options[ i ].value || sel.options[ i ].innerHTML
        alert( 'val = "' + val + '"  sel.option: "' + data + '"' )
        if ( val == ( sel.options[ i ].value || sel.options[ i ].innerHTML ) ) {
          sel.options[ i ].selected = true
          break
        }
      }
      if ( i == sel.options.length ) {
        alert( 'Specified value not found: ' + val )
      }
    } else {
      alert( 'Unexpected element type: "' + sel.nodeName + '"' )
    }
  }
}
</script>

Open in new window

It throws up several alerts....
val="256" sel.option: "253"
val="256" sel.option: "6001"
val="256" sel.option: "255"
val="256" sel.option: "256"
val="3726" sel.option: "[none available]"
Specified value not found: 3726

256 corresponds to the ID for the option I selected in formFloor, but I'm not sure about the other numbers.
I'm confused that the penultimate option match didn't occur...
Unless, one is an integer and the other a string...

How about adding the following statement just after the

var sel = document.getElementById( id )

Do you still get the "not found" error?
val = val.toString()

Open in new window

Yes, same error.  It matches the space but not the suite (the first one, but not the second).
As an update, I ran it again and checked the values that your earlier debugging efforts provided.  The first one is (in this case) val = "275" sel.option: "267"  That val is the spaceID unique ID field.  I have no idea where 267 is coming from.  The next is val = "275" sel.option: "6003".  I looked in my database and I have neither a space nor a suite with an ID of 6003, so I'm not sure what that's coming from either.

However, the next run of alerts which start with val = "275" sel.option: "269" then proceed up to sel.option: "270", "271", and so on.  It's running through the available spaces.  Once it gets to "275", I get the alert val = "3862" sel.option: "[none available]".  3862 is the ID for the selected suite.

Does this mean anything to you?
Well, the "val" is what is passed in as a parameter, and the sel.option is what is encountered during each iteration (i.e., each option value).

Take a look at the (monspaced font) below..



The next alert(), i.e.,

val = "3862" sel.option: "[none available]".

must be coming from the next call to pick()... is all I can figure.

Does this make sense?

We may need to "dump" the whole select to see what it actually contains.
How many values are we talking about?

val | sel.option |
----+------------+---
275 | 267        | options[ 0 ] - no match, keep looking
275 | 6003       | options[ 1 ] - no match, keep looking
275 | 269        | options[ 2 ] - no match, keep looking
...
275 | 275        | options[ 8 ] - match, loop is done...
 
That entry (i.e., options[ 8 ]) should be "selected", and pick() should return to the calling routine.

Open in new window

Please provide the whole page, so I can take another look at what it contains.

Thanks

There are quite a few values -- basically each building can have 10 floors (formSpace) and each floor can have 10-20 suites (formSuite).  Here's what's in my HTML (ASP) page at the moment:

<script language="JavaScript" src="/scripts/dropdown.js"></script>
<%
'      Call the first dropdown (Building -> Space)
createDropdown 1,"formBuilding","formAsset","formSpace","formAsset",2,1,0,arrSpace
'      Call the second dropdown (Space -> Suite)
createDropdown 2,"formSpace","formAsset","formSuite","formAsset",2,1,0,arrSuite
%>
</head>
<script type="text/javascript">
  function init() {
    MM_callJS('setDynaList(arrDL1)')
    MM_callJS('setDynaList(arrDL2)')
      pick("formSpace",<%=checkData("formSpace","")%>)
      pick("formSuite",<%=checkData("formSuite","")%>)
  }
</script>
<body onload="init()">

Here's the included javascript file dropdown.js:

// Dynamic drop-down list generic functions

function pick( id, val ) {
  var sel = document.getElementById( id )
  if ( sel ) {
    if ( sel.nodeName == 'SELECT' ) {
      for ( var i = 0; i < sel.options.length; i++ ) {
        var data = sel.options[ i ].value || sel.options[ i ].innerHTML
        alert( 'val = "' + val + '"  sel.option: "' + data + '"' )
        if ( val == ( sel.options[ i ].value || sel.options[ i ].innerHTML ) ) {
          sel.options[ i ].selected = true
          break
        }
      }
      if ( i == sel.options.length ) {
        alert( 'Specified value not found: ' + val )
      }
    } else {
      alert( 'Unexpected element type: "' + sel.nodeName + '"' )
    }
  }
}


function setDynaList(arrDL){
 var oList1 = document.forms[arrDL[2]].elements[arrDL[1]];
 var oList2 = document.forms[arrDL[4]].elements[arrDL[3]];
 var arrList = arrDL[5];
 
 clearDynaList(oList2);
 
 if (oList1.selectedIndex == -1){
  oList1.selectedIndex = 0;
 }
 populateDynaList(oList2, oList1[oList1.selectedIndex].value, arrList);
 return true;
}
 
function clearDynaList(oList){
 for (var i = oList.options.length; i >= 0; i--){
  oList.options[i] = null;
 }
 
 oList.selectedIndex = -1;
}
 
function populateDynaList(oList, nIndex, aArray){
 for (var i = 0; i < aArray.length; i= i + 3){
  if (aArray[i] == nIndex){
   oList.options[oList.options.length] = new Option(aArray[i + 1], aArray[i + 2]);
  }
 }
 if (oList.options.length == 0){
  oList.options[oList.options.length] = new Option("[none available]","");
 }
 
 oList.selectedIndex = 0;
}

function MM_callJS(jsStr) { //v2.0
  return eval(jsStr)
}


Those functions are called by the select object like so:

<label for="formBuilding"><%=errorLabel("Building:","e7",1)%></label>
                              <select name="formBuilding" id="formBuilding" onChange="MM_callJS('setDynaList(arrDL1)')"<%=errorFormField("e7","select","")%>>
                                    <% If IsArray(arrBldg) = True Then %>
                                          <option value=""<% If CStr(checkData("formBuilding","")) = "" Then %> selected<% End If %>>Please Select</option>
                                          <% For i = 0 to uBound(arrBldg,2) %>
                                                <option value="<%=arrBldg(0,i)%>"<% If CStr(checkData("formBuilding","")) = CStr(arrBldg(0,i)) Then %> selected<% End If %>><%=arrBldg(1,i)%></option>
                                          <% Next
                                    Else %>
                                          <option value="">ERROR: No Buildings Established</option>
                                    <% End If %>
                              </select>
                              <br class="clear">
                              <label for="formSpace"><%=errorLabel("Floor/Space:","e8",1)%></label>
                              <select name="formSpace" id="formSpace" onFocus="MM_callJS('setDynaList(arrDL2)')" onChange="MM_callJS('setDynaList(arrDL2)')"<%=errorFormField("e8","select","")%>>
                              </select>
                              <br class="clear">
                              <label for="formSuite"><%=errorLabel("Suite:","e9",0)%></label>
                              <select name="formSuite" id="formSuite"<%=errorFormField("e9","select","")%>>
                              </select>
                              <br class="clear">
One thing that I see is related to your "clearDynaList()" function.

It doesn't really delete the options array entries, so if the number of options to be added next is less than what was there previously, you will have some null entries at the end of the list.

So, it would be better to use something like the code below.

However, this still doesn't explain the unexpected values seen earlier.

Would you consider adding an empty debug div at the bottom of your page so that we could display information about the select contents?

If so, add this to the bottom of your HTML, i.e., just before </body>

<div id='debug'></div>

and then we could add something like the dumpSel() routine below.

Then, all you would need to do to display the contents of the select (as far as the pick() function was concerned) would be to have a statement like:

dumpSel( oList1 )
function clearDynaList(oList){
  oList.options.length = 0
  oList.selectedIndex = -1;
}
 
function dumpSel( sel ) {
  var debug = document.getElementById( 'debug' )
  if ( debug ) {
    if ( sel && sel.nodeName == 'SELECT' ) {
      debug.innerHTML = ''
      for ( var i = 0; i < sel.options.length; i++ ) {
        var val = sel.options[ i ].value || sel.options[ i ].innerHTML
        debug.innerHTML += 'options[ ' + i + ' ] = "' + val + '"<br>'
      }
    } else {
      alert( ( sel ) ? 'Required parameter not specified.' : ( 'Unexpected element parameter specified: ' + sel.nodeName ) )
    }
  } else {
    alert( '"debug" element not found.' )
  }
}

Open in new window

When I try to call that function I get an error: oList1 is not defined.  I've tried putting that function in the included Javascript file in several places as well as in the ASP page itself.  Is it possible that I'm putting it in the wrong place?
yeah.

I used the variable name from your code as an example.
where you used oList1 and oList2 as references to different select lists.

You could easily do something like this:
dumpSel( document.getElementById( 'formBuilding' )
 
or 
 
dumpSel( document.getElementById( 'formSpace' )

Open in new window

oops, don't forget to close the parenthesis... sorry
dumpSel( document.getElementById( 'formBuilding' ) )
 
or 
 
dumpSel( document.getElementById( 'formSpace' ) )

Open in new window

Ahh, I see.  When I run the it for formSpace I get this:
options[ 0 ] = "197"
options[ 1 ] = "198"
options[ 2 ] = "199"
options[ 3 ] = "200"
options[ 4 ] = "209"
options[ 5 ] = "210"
options[ 6 ] = "5989"
options[ 7 ] = "5990"

Those are the proper spaceID values for the formSpace drop-down.  When I run it for formSuite I get this:

options[ 0 ] = "3693"
options[ 1 ] = "3836"
options[ 2 ] = "3979"

Those are also the correct suiteID values.
So those should be the values that are processed by the pick() routine.

When pick() is being called, you should get an alert() telling you these same values in this order.

Is that what you are seeing?

Is the value that was passed (i.e., the "val = " value) what you expect?

What's happening, or not happening, at this point that we need to attack?
Yes, I do get those alerts.  The last one though is always Specified value not found: 3693.  I picked the first suite which corresponds to that 3693 ID number.  Basically, the routine works perfectly on the formSpace drop-down -- when the page redirects back to the form the space that I picked is still highlighted.  However the suite is not.

One other thing just occurred to me: when it redirects back the space is selected but the suite says [none available] and there are no options at all.  I need to reselect the floor by picking another floor which then populates the suites list.  If my logic is correct, this would mean that the pre-selecting of the formSpace option is *not* triggering the population of the formSuite list.  I checked the source at runtime and it *is* creating the array properly however.  So I'm a bit confused.
I think that you have that issue identified.

When you say: "when it <the page?> redirects back the space is selected but the suite says [none available] and there are no options at all."

So, we may need to use a session cookie (or something) to keep track of the "floor" so that when the "redirection back to the page" occurs, then the saved floor number can be used to cause the population of the select statement to occur.

Does that make sense?
We'll, what I'm doing is on the processing page I've got a function that saves all the submitted form values to a database.  Those are then recalled via another function on the submitting page -- the one I'm redirecting back to -- it's evidently working well since it's doing the proper display on the formSpace field.  That's what my VBScript function does that I'm using when calling the pick function.  I think I just need a way to have that pre-selected space trigger the suite drop-down and then have the pick function pre-select the suite.

Is there a way to do that?
I'll have to think on that, and get back to you.

The kids are hungry, and I need to get something for everyone to eat.  :-)
>> We'll, what I'm doing is on the processing page I've got a function that saves all the submitted form values to a database.

  ok, so far, so good.

>> Those are then recalled via another function on the submitting page -- the one I'm redirecting back to -- it's evidently working well since it's doing the proper display on the formSpace field.

  ok, I'm following you... at least I think I am.

>>  That's what my VBScript function does that I'm using when calling the pick function.

  ok,  sounds reasonable

>> I think I just need a way to have that pre-selected space trigger the suite drop-down and then have the pick function pre-select the suite.

  Hm.  I wonder if we could save a cookie value in JavaScript, and have the VBscript look for the cookie when it loads, and use it to change the selected value and load the data accordingly.

  How does that sound?
If you think that will work, it sounds good to me -- I don't know the code for setting a cookie in JS though.  Also, I'm basically doing the same thing when calling my VBScript function "checkData".  It's looking into an array created from a database in an earlier call to then find a match.  I'm not sure how using JavaScript to set a cookie would be any different but I'll be happy to try it out.
Just a thought, is there a way to trigger the MM_callJS function (which I'm currently calling with onLoad and onChange) during the pick function?  Something like the code below?  In that example I'm adding a "list" parameter where I'll pass arrDL1 or arrDL2 (DL2 in this case) which would trigger that function.  I've tried this and it doesn't work but perhaps I've got my code out of order or something.  Any thoughts?

function pick( id, val, list ) {
  var sel = document.getElementById( id )
  if ( sel ) {
    if ( sel.nodeName == 'SELECT' ) {
      for ( var i = 0; i < sel.options.length; i++ ) {
        var data = sel.options[ i ].value || sel.options[ i ].innerHTML
        // alert( 'val = "' + val + '"  sel.option: "' + data + '"' )
        if ( val == ( sel.options[ i ].value || sel.options[ i ].innerHTML ) ) {
          sel.options[ i ].selected = true
		  if ( list != '') {
			MM_callJS(setDynaList(list))
		  }
          break
        }
      }
      if ( i == sel.options.length ) {
        alert( 'Specified value not found: ' + val )
      }
    } else {
      alert( 'Unexpected element type: "' + sel.nodeName + '"' )
    }
  }
}

Open in new window

Q: How do I "set a cookie value"?
A: The attached files demonstrate how to set & read cookie values.

According to https://www.experts-exchange.com/questions/24425495/Marking-an-option-as-Selected.html?anchorAnswerId=24450361#a24450361,
MM_callJS() is a simple JavaScript function expecting

What is MM_callJS() that evaluates the specified "statement".  So, the statement that you have, i.e.,

MM_callJS(setDynaList(list))

may have a problem because of the fact that list is a parameter value passed to pick().  What is being passed?

cookie.js.txt
CookieTest.html.txt
Here are the functions that I've got so far -- the first three are saved in an included dropdown.js file, and the pick() function is coded directly in the page surrounded by <script> tags.  Is it possible that I've got things out of order?
function setDynaList(arrDL){
 var oList1 = document.forms[arrDL[2]].elements[arrDL[1]];
 var oList2 = document.forms[arrDL[4]].elements[arrDL[3]];
 var arrList = arrDL[5];
 
 clearDynaList(oList2);
 
 if (oList1.selectedIndex == -1){
  oList1.selectedIndex = 0;
 }
 populateDynaList(oList2, oList1[oList1.selectedIndex].value, arrList);
 return true;
}
 
function clearDynaList(oList){
  oList.options.length = 0
  oList.selectedIndex = -1;
}
 
function populateDynaList(oList, nIndex, aArray){
 for (var i = 0; i < aArray.length; i= i + 3){
  if (aArray[i] == nIndex){
   oList.options[oList.options.length] = new Option(aArray[i + 1], aArray[i + 2]);
  }
 }
 if (oList.options.length == 0){
  oList.options[oList.options.length] = new Option("[none available]","");
 }
 
 oList.selectedIndex = 0;
}
 
function MM_callJS(jsStr) { //v2.0
  return eval(jsStr)
}
 
function pick( id, val, list ) {
  var sel = document.getElementById( id )
  if ( sel ) {
    if ( sel.nodeName == 'SELECT' ) {
      for ( var i = 0; i < sel.options.length; i++ ) {
        var data = sel.options[ i ].value || sel.options[ i ].innerHTML
        // alert( 'val = "' + val + '"  sel.option: "' + data + '"' )
        if ( val == ( sel.options[ i ].value || sel.options[ i ].innerHTML ) ) {
          sel.options[ i ].selected = true
		  if ( list != '') {
			MM_callJS(setDynaList(list))
		  }
          break
        }
      }
      if ( i == sel.options.length ) {
        alert( 'Specified value not found: ' + val )
      }
    } else {
      alert( 'Unexpected element type: "' + sel.nodeName + '"' )
    }
  }
}

Open in new window

I'm accepting this solution since you have solved my initial question.  Thanks so much!  I'm posting a new question to deal with the secondary problem I'm running into.
Thank you for the grade & points.

Good luck & have a great day