Include the following function code in the html.

function populateChildSelectBox(parentCtrl, selectCtrl) {
        var i;
        var itemArrayIndex = 0;
        var parentValue = parentCtrl.options[parentCtrl.selectedIndex].value;
        for (i = parentChildMapping.length; i > 0; i--) {
                if (parentValue == parentChildMapping[i - 1]) {
                        if (i != 0) {
                                itemArrayIndex = i;
                        }
                        else {
                                itemArrayIndex = 1;
                        }
                        break;
                }
        }
        
        itemArray = childArray[itemArrayIndex];
        for (i = selectCtrl.options.length; i >= 0; i--) {
                selectCtrl.options[i] = null; 
        }
        
        if (itemArray != null) {
                for (i = 0; i < itemArray.length; i++) {
                        if (itemArray[i][0] != null) {
                                selectCtrl.options[i] = new Option(itemArray[i][0]);
                        }
                        if (itemArray[i][1] != null) {
                                selectCtrl.options[i].value = itemArray[i][1]; 
                        }
                }
                
                if (itemArray.length != 0) {
                        selectCtrl.options[0].selected = true;
                }
        }
}

Define the relationship as following:-

parentChildMapping = new Array(1, 4);

childArray = new Array(
new Array(
        new Array("Default Text", "0")
),
new Array(
        new Array("Maths", "12"),
        new Array("History", "13"),
        new Array("Physics", "15")
),
new Array(
        new Array("Hardware", "14"),
        new Array("Software", "18"),
        new Array("Networking", "16")
)
);

Parent child mapping array has only those IDs of Course for which any Subject exists. 
Child Array first define a default text element and then define the child elements for 
the Course.

Call the function from the onChange event of you Course select box like this 
populateChildSelectBox(this.form.course, this.form.subject), where course is the name 
of Course select box and subject is the name of Subject select box.

It is easier as we need to generate this javascript from database.

-----Original Message-----
From: Kesav, Ramesh [mailto:[EMAIL PROTECTED]]
Sent: Friday, May 17, 2002 11:09 AM
To: [EMAIL PROTECTED]
Subject: off topic - java script


Hi all,

 i have 2 select boxes.
If i choose a value from the first select box the second select box should
have appropriate values.

eg: first one has science/ IT etc.,

 if i choose science the second should show
say
maths/ history/ physics/ chemistry

if i choose IT from the first , the second box should show
say
hardware/ software /networking / etc.,

if anybody has a piece of code for this i would really appreciate it.




Regards

Ramesh Kesavanarayanan
[EMAIL PROTECTED]

___________________________________________________________________________
To unsubscribe, send email to [EMAIL PROTECTED] and include in the body
of the message "signoff SERVLET-INTEREST".

Archives: http://archives.java.sun.com/archives/servlet-interest.html
Resources: http://java.sun.com/products/servlet/external-resources.html
LISTSERV Help: http://www.lsoft.com/manuals/user/user.html

___________________________________________________________________________
To unsubscribe, send email to [EMAIL PROTECTED] and include in the body
of the message "signoff SERVLET-INTEREST".

Archives: http://archives.java.sun.com/archives/servlet-interest.html
Resources: http://java.sun.com/products/servlet/external-resources.html
LISTSERV Help: http://www.lsoft.com/manuals/user/user.html

Reply via email to