Question

I have a web form with two drop-down boxes, and I’m looking for a way to dynamically update the options of the second box based on selections from the first.

The first box represents a data type, and the second box is a list of databases associated with the selected type.

I have the basic code running smoothly here:

var TypeA_DbSuffixList = ['Test1', 'Test2', 'Test3'];
var TypeB_DbSuffixList = ['TestA', 'TestB', 'TestC'];

function fill_dbSuffixList(){

   document.getElementById("dbSuffixList").options.length = 0;
   var suffixMenu = document.getElementById("dbSuffixList");
   var dataFormat = document.getElementById("dataFormatType");
   var suffixList = dataFormat.value + "dbSuffixList";

   if (suffixList == 'TypeA_dbSuffixList') {
      for(index in TypeA_dbSuffixList) {
        suffixMenu.options[suffixMenu.options.length] = new Option(TypeA_dbSuffixList[index], index);
      }
   }

   if (suffixList == 'TypeB_dbSuffixList') {
      for(index in TypeB_dbSuffixList) {
        suffixMenu.options[suffixMenu.options.length] = new Option(TypeB_dbSuffixList[index], index);
      }
   } 
}

That code (activated whenever a selection is made in the dataType box) clears the existing list of options and repopulates the list based on the selected value of the “dataFormatType” box.

The problem that I face is that the actual lists of database tables are not hard coded and are instead generated with the following calls to the server to avoid repetitive editing of the page every time a new database is added:

var TypeA_dbSuffixList = ${TypeA_dbSuffixList};
var TypeB_dbSuffixList = ${TypeB_dbSuffixList};

These calls return the following code:

var TypeA_dbSuffixList = [Test1, Test2, Test3];
var TypeB_dbSuffixList = [TestA, TestB, TestC];

With the above code, the initial function treats each entry in the type arrays as an undefined variable, and nothing is ever written to the drop-down list.

If I were to add

var Test1 = "Apple";
var Test2 = "Orange";
var Test3 = "Grape";

prior to the “for” loop for TypeA, then selecting TypeA from the dataType drop-down list returns “Apple”, “Orange”, and “Grape” as the available databases for TypeA.

Visually, I see what needs to be changed. The [Test1, Test2, Test3] returns need to be [‘Test1’, ‘Test2’, ‘Test3’]. I’m just unsure exactly how to go about changing it, and have exhausted every web search I can think of.

Is there a way to either change the format of the returned arrays, or use the existing format and pass variable names as drop-down selections instead of using variable values?

Any help is greatly appreciated. I will continue to search for an answer on my own as well and will post it here should I find one.

Answer 1

I think the cleanest solution would be to change the code on the server-side to generate a proper JavaScript array of Strings, with the values enclosed in single or double quotes.

If that’s not possible for some reason, and you want a pure-JavaScript solution, then I suggest you wrap the entire JSP/ASP/PHP variable (not sure what framework you’re using) in double quotes, strip the string of brackets and spaces using a regex, and then split it into a string array using the comma as a delimiter.

So in your JavaScript, this:

var TypeA_dbSuffixList = ${TypeA_dbSuffixList};

would become this:

var TypeA_dbSuffixList = "${TypeA_dbSuffixList}".replace(/[\[\]\s]/g,"").split(",");