My AJAX Chained Selector Function (Enjoy!)

[Jason Ferguson]

As a nice change of pace, I thought I would actually post some working code here for people to use. However, I wouldn't mind suggested improvements.

This code is useful for creating AJAX Chained Selectors (one select box populates the next, and so on). It is based on the Prototype javascript library.

The function expects the id field value of the "source" select box, the id value of the "destination" box, and whatever action that AJAX will have to call to retrieve the set of results (in JSON format) to populate the destination select box with. The JSON fields are expected to be "id" and "name". (Note: personally, I use a Struts action that retrieves a collection, then uses json-lib to convert the collection to a JSON array, then uses HttpServletResponse.getWriter() to print it out.

Anyhow, here you go:

// Generic Chain Select function
// The following assumptions are made:
// - None of the function arguments are null
// - Any values in the select box that are "information-only" must have a value of < 0
// - The action returns a valid JSON object with values for "id" and "name" (aka description)
function chainSelect(originalId, destinationId, action) {
 
    if (originalId == null || destinationId == null || action == null) {
        return false;
    }
 
    var origSelect = document.getElementById(originalId);
    var destSelect = document.getElementById(destinationId);
 
    if (origSelect != null && destSelect != null) {
 
        var params = "id=" + origSelect.value;
 
        // I always have my "please select a value" label as -1
        if (origSelect.value > -1) {
 
            // Clean out the old values of the destination select box
            while (destSelect.hasChildNodes()) {
                destSelect.removeChild(destSelect.firstChild);
            }
 
            // Put the information-only option in
            var informationNode = document.createElement('option');
            informationNode.setAttribute('value','-1');
            informationNode.appendChild(document.createTextNode('Please select an option'));
            destSelect.appendChild(informationNode);
 
            var myAjax = new Ajax.Request(action, {
                method: 'get',
                Accept: 'application/json',
                parameters: params,
                onSuccess: function(transport) {
                    var json = transport.responseText.evalJSON(true);
                    for (i = 0; i < json.length; i++) {
                        var node = document.createElement('option');
                        node.setAttribute('value', json[i].id);
                        node.appendChild(document.createTextNode(json[i].name));
                        destSelect.appendChild(node);
                    }
                },
                onFailure: function(t) {
                    alert('Error: ' + t.status + '--' + t.statusText);
                }
            });
        }
 
    }
 
    return false;
 
}

[Eric Pascarello]

I would not remove the children to remove the options, there is a way to do it in one line.

I would not use createElement, I would something else tha lets you add options in one line.

Eric

[Eric Pascarello]

Also should add

i is global and not local

local variables have quicker lookup when being referenced.

Referencing json.length is is slower and storing a reference into a variable and using the variable in a loop. var len = json.length;

for(var i=0;i<len;i++){

Also nice to destory object references when done using them.
myRef = null;

Eric

[Jason Ferguson]

Since the script requires the Prototype library anyways, I'll probably switch to using its DOM management functionality. I ordered a dead-tree reference (Prototype and Script. aculo. us: You Never Knew JavaScript Could Do This!) and will alter the DOM functionality accordingly.

Originally posted by Eric Pascarello:
I would not remove the children to remove the options, there is a way to do it in one line.

I would not use createElement, I would something else tha lets you add options in one line.

Eric

[Jason Ferguson]

Ouch... you're right. I didn't think to consider storing the results of json.length because I had forgotten to consider that said length could be completely arbitrary.

I also forgot to dereference the object, good catch.

Thanks!
Jason

Originally posted by Eric Pascarello:
Also should add

i is global and not local

local variables have quicker lookup when being referenced.

Referencing json.length is is slower and storing a reference into a variable and using the variable in a loop. var len = json.length;

for(var i=0;i<len;i++){

Also nice to destory object references when done using them.
myRef = null;

Eric

[Eric Pascarello]

You could have ordered Bear's book:

http://www.amazon.com/Prototype-Scriptaculous-Action-Ajax-Crane/dp/1933988037/jr-20

For the length...it is easy as

selectObj.options.length = 0;

for adding a new option it is as simple as

selectOpts = selectObj.options;
selectOpts[selectOpts.length] = new Option(text,value);

Best thing with JavaScript it to limit the number of lookups. More lookups in the DOM tree means longer something takes to execute. Eliminate the greatest number of "dots" that makes sense for reuse.

Eric