[RESOLVED] Help with client-side JavaScript code on ASP.NET (VB) page

[BruceG]

Hello,
The overall goal of this is to allow a user to select a school based on gender, grade, and state. The data we are dealing with is a school table with the following fields:
SCHOOL_NAME | STATE | BOY_FLAG | GIRL_FLAG | GR_K_FLAG | GR_1_FLAG | GR_2_FLAG ... GR_12_FLAG
(The flags are bit fields. A particular school may be boys only or girls only, and will only have a certain range of grades, depending on whether it is an elementary school, middle school, or high school.)
Sample data:
Academy of Our Lady, NJ, 1, 1, 0, 0, 0, 0, 0, 1, 1, 1, .....
Holy Redeemer High School, PA, 1, 1, 0, 0, 0, 0, 0, 1, 1, 1, .....
St. Mary's Academy for Girls, CT, 0, 1, 0, 1, 1, 1, 1, 0, 0, 0 ...
St. Patrick Boys School, MD, 1, 0, 0, 1, 1, 1, 1, 0, 0, 0 ...
We have about 2500 such records.

So on the web page we have 4 dropdowns:
ddlGender (to choose Boy or Girl)
ddlGrade (to choose a grade K thru 12)
ddlState (to choose one of the 50 US states)
ddlSchool (to choose a school that meets the gender, grade, and state criteria selected in the 3 dropdowns above)

The school dropdown should repopulate whenever one of the other 3 dropdowns changes.

This is currently working with standard server-side code - autopostbacks on the 3 dropdowns which runs a query to populate the school dropdown appropriately.

However, even with MaintainScrollPositionOnPostback="true", the postbacks cause a less-than-smooth experience for the user - especially when they navigate the dropdowns with the keyboard (for example on the grade dropdown, if they want to get to the desired grade by pressing the down arrow rather than dropping down the list and choosing with the mouse, then we get a postback on every keypress of the down arrow).

So, I'm looking for a client-side solution to avoid the postbacks. I'm stuck in the "old school" way of doing things, as I am not a rock star when it comes to AJAX, update panels, and the like. I'm wondering if something like the following is feasible (things were done this way on the classic ASP version of this site):
Do a one-time load of all the school data into Javascript array(s).
When the user changes the selection in the gender, grade, or state dropdown (i.e. the equivalent of "onchange" event), call a JS function to re-populate the school dropdown (which would loop thru the school arrays and add schools matching the criteria as entries ("<option>"s) to the school dropdown,.

If the above is feasible, I could use some guidance on how to structure the code (i.e. "on client click" syntax, "register client script" etc.). If not, I could use some recommendations on how to achieve the desired goal with the least amount of pain ...

Thanks,
Bruce