jQuery filter on optgroup
===

I have two select boxes.  The first is a list of the optgroups of the second.  Both are needed for my query, but I would like to filter the second select to ONLY show the region optgroup and it's campuses when it's selected from the first.

Here is my code:

    <html>
    <body>
    <select name="region">
        <option value="%">All</option>
        <option value="A">Northwest</option>
        <option value="B">North Central</option>
    </select>
    <select name="campus">
        <option value="%">All</option>
        <optgroup label="Northwest">
            <option value="1">Gary</option>
            <option value="2">Valparaiso</option>
            <option value="3">East Chicago</option>
        </optgroup>
        <optgroup label="North Central">
            <option value="4">South Bend</option>
            <option value="5">Elkhart</option>
            <option value="6">Warsaw</option>
        </optgroup>
    </select>
    </body>
    </html>

So if someone selects Northwest from the first one, I want to use jQuery to filter down the second one so it now looks like so:

    <select name="campus">
        <optgroup label="Northwest">
            <option value="1">Gary</option>
            <option value="2">Valparaiso</option>
            <option value="3">East Chicago</option>
        </optgroup>
    </select>

Not even sure if this is possible and this is my first attempt at jQuery so I am lost.  Thanks in advance.