[jQuery] Cascade plugin help

[jQuery] Cascade plugin help


I am new to jquery and I need to make a form that allows a user to
select a state and a city that they go to school in. I am using the
cascade juqery plug-in (http://plugins.jquery.com/project/cascade.
Which I think is a great plugin) The problem is there is a lot of data
and it takes a long time for it all to load (some 28,000 records).
What I want to do is split it up into different files and then load
only the file that contains the data for that start/region. A sample
of my code is blow:
My html:
        <div class="container-1">
            <label for="rsvp_state">State</label>
                <select id="rsvp_state">
                    <option value="">Pick a State</option>
                    <option value="OR">Oregon</option>
                    <option value="WA">Washington</option>
                    <option value="CA">California</option>
                </select>
        </div>
        <div class="container-2">
            <label for="rsvp_city">Pick a City</label>
                <select id="rsvp_city">
                </select>
        </div>
//below are the different loads that contain different data based on
the state
                    var OR = {
                        ajax: {url: ‘orData.js' },
                        template: commonTemplate,
                        match: commonMatch
                    };
                    var WA = {
                        ajax: {url: ‘waData.js' },
                        template: commonTemplate,
                        match: commonMatch
                    };
                    var opts = {
                        ajax: {url: ‘otherData.js' },
                        template: commonTemplate,
                        match: commonMatch
                    };
            $(document).ready(function() {
                var currentState;
// #rsvp_state refers to a dropdown menu that contains all the states
//what I want to do with this is determine what state is currently //
selected and store that in a variable
                $('#rsvp_state').change(function(){currentState = $
('#rsvp_state').val();});
                jQuery(".container-2 select").each(function() {
                    var child = jQuery(this);
                    child.parents(".container-2:first").siblings(".container-1").find
("select").each(function() {
//below I want to compare the verable to the different options I have
above
                        if(currentState == 'OR'){
                        child.cascade(jQuery(this),OR);
                        }
                        if(currentState == 'WA'){
                        child.cascade(jQuery(this),WA);
                        }
                        else{
                        child.cascade(jQuery(this),opts);
                        }
                    });
                });
//below is a sample line from orData.js
{'When':'Portland','Value':'123','Text':'Benson Highschool'}]
Any help is greatly appreciated.
-Chris