problem z formularzem

[cachaito]

Witam!

Mam prosty formularz:

<label for="zodiac">Choose your zodiac sign:</label>
   <select name="zodiac" size="1">
       <optgroup label="Your zodiac sign:">
           <option value="leo">Leo</option>
           <option value="virgo">Virgo</option>
       </optgroup>
   </select>

<label for="more">Tell me more about you:</label>
   <select name="more" id="leo" size="1">
       <optgroup label="Tell me exacly about your leo sign:">
           <option value="first">I am from July</option>
           <option value="second">"I am from August"</option>
       </optgroup>   
   </select>

   <select name="more" id="virgo" size="1">
       <optgroup label="Tell me exacly about your virgo sign:">
           <option value="first">"I am from August</option>
           <option value="second">"I am' from September"</option>
       </optgroup>
   </select>

Listy #leo i #virgo są ukryte (display:none;). Jak zrobić (najlepiej z pomocą jQuery...) aby po wybraniu znaku zodiaku z listy pierwszej pojawiła się odpowiednia lista dla danego znaku? Chodzi o to, że gdy nacisnę na opcję Leo pojawia się:

<label for="more">Tell me more about you:</label>
   <select name="more" id="leo" size="1">
       <optgroup label="Tell me exacly about your leo sign:">
           <option value="first">I am from July</option>
           <option value="second">"I am from August"</option>
       </optgroup>   
   </select>

zaś gdy zmienię zdanie i nacisnę Virgo, lista Leo chowa się i pojawia:

<select name="more" id="virgo" size="1">
       <optgroup label="Tell me exacly about your virgo sign:">
           <option value="first">"I am from August</option>
           <option value="second">"I am' from September"</option>
       </optgroup>
   </select>

Będę wdzięczny za wszelkie wskazówki...

[leadersmind]

Musisz zrobić bind na select'a ze zdarzeniem change. I w zależności od opcji wpisywać w kolejnego selecta odpowiednie dane. Oczywiście możesz do tego również wykorzystać ajax - masz szerokie pole wyboru.