I have two selects on my page

<select name="category">

          <option value="Alabama" rel="1">Alabama</option>

          <option value="Alaska" rel="2">Alaska</option>

          <option value="Arizona" rel="3">Arizona</option>

         <option value="Arkansas" rel="4">Arkansas</option>

          <option value="California" rel="5">California</option>

           <option value="Colorado" rel="6">Colorado</option>




      </select>

  <select name="items" class="cascade">


          <option value="BALDWIN" class="1">BALDWIN</option>

          <option value="HOUSTON" class="1">HOUSTON</option>

          <option value="JEFFERSON" class="1">JEFFERSON</option>

          <option value="LEE" class="1">LEE</option>

          <option value="MADISON" class="1">MADISON</option>

          <option value="MOBILE" class="1">MOBILE</option>

          <option value="SHELBY" class="1">SHELBY</option>

          <option value="VALDEZ CORDOVA" class="2">VALDEZ CORDOVA</option>

          <option value="KETCHIKAN GATEWAY" class="2">KETCHIKAN GATEWAY</option>

          <option value="LA PAZ" class="3">LA PAZ</option>

          <option value="COCHISE" class="3">COCHISE</option>

          <option value="MOHAVE" class="3">MOHAVE</option>

          <option value="MARICOPA" class="3">MARICOPA</option>

          <option value="PIMA" class="3">PIMA</option>

          <option value="PULASKI" class="4">PULASKI</option>

          <option value="WASHINGTON" class="4">WASHINGTON</option>

          <option value="GARLAND" class="4">GARLAND</option>

          <option value="LOS ANGELES" class="5">LOS ANGELES</option>

          <option value="CONTRA COSTA" class="5">CONTRA COSTA</option>

          <option value="ALAMEDA" class="5">ALAMEDA</option>

          <option value="VENTURA" class="5">VENTURA</option>

          <option value="TUOLUMNE" class="5">TUOLUMNE</option>

          <option value="SOLANO" class="5">SOLANO</option>

          <option value="STANISLAUS" class="5">STANISLAUS</option>

          <option value="RIVERSIDE" class="5">RIVERSIDE</option>

          <option value="SACRAMENTO" class="5">SACRAMENTO</option>

          <option value="SAN DIEGO" class="5">SAN DIEGO</option>

          <option value="SAN FRANCISCO" class="5">SAN FRANCISCO</option>

          <option value="SAN MATEO" class="5">SAN MATEO</option>

          <option value="SANTA BARBARA" class="5">SANTA BARBARA</option>

          <option value="SANTA CLARA" class="5">SANTA CLARA</option>

          <option value="SANTA CRUZ" class="5">SANTA CRUZ</option>

          <option value="PLACER" class="5">PLACER</option>

          <option value="MARIN" class="5">MARIN</option>

          <option value="MONTEREY" class="5">MONTEREY</option>

          <option value="NEVADA" class="5">NEVADA</option>

          <option value="ORANGE" class="5">ORANGE</option>

         <option value="MORGAN" class="6">MORGAN</option>

          <option value="PITKIN" class="6">PITKIN</option>

          <option value="PUEBLO" class="6">PUEBLO</option>

          <option value="WELD" class="6">WELD</option>

          <option value="ADAMS" class="6">ADAMS</option>

          <option value="ARAPAHOE" class="6">ARAPAHOE</option>

          <option value="BOULDER" class="6">BOULDER</option>

          <option value="Broomfield" class="6">Broomfield</option>

          <option value="DENVER" class="6">DENVER</option>

          <option value="DOUGLAS" class="6">DOUGLAS</option>

          <option value="EAGLE" class="6">EAGLE</option>

          <option value="EL PASO" class="6">EL PASO</option>

          <option value="LARIMER" class="6">LARIMER</option>

          <option value="JEFFERSON" class="6">JEFFERSON</option>

          <option value="GARFIELD" class="6">GARFIELD</option>

      </select>

I use some jquery for client side filtering

$(document).ready(function(){
    var $cat = $('select[name=category]'),
        $items = $('select[name=items]');

    $cat.change(function(){
        var $this = $(this).find(':selected'),
            rel = $this.attr('rel'),
            $set = $items.find('option.' + rel);

        if ($set.size() < 0) {
            $items.hide();
            return;
        }

        $items.show().find('option').hide();

        $set.show().first().prop('selected', true);
    });
});​

I'm using the latest version of jquery, dunno why my selects are behaving the way that they do.

I got the idea from this jsfiddle

http://jsfiddle.net/userdude/bY5LF/

here's my jsfiddle

http://jsfiddle.net/kmarimon1/P89aT/

I'll give you a cookie for enlightening me!

Thanks!