problem z formularzem, Jak po wybraniu pozycji wyświetlić bez przeładowania drugę listę Opcje

[cachaito]

Witam!

Mam prosty formularz:

[HTML] pobierz, plaintext 
<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>
[HTML] pobierz, plaintext 

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ę

[HTML] pobierz, plaintext 
<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>
[HTML] pobierz, plaintext 

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

[HTML] pobierz, plaintext 
 <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>
[HTML] pobierz, plaintext 

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

Ten post edytował cachaito 23.08.2010, 16:34:09

[cachaito]

Dziękuje askone. Skrypty naprawdę świetne. Chciałbym jednak dalej pociągnąć ten wątek. Podane przez Ciebie pluginy to gotowe rozwiązania a Chained Selects jQuery Plugin to istna perełka. Myślałem nad tym problemem i myślę, że można go rozwiązać prościej. Kłopot w tym, iż nie umiem pisać świetnie w jQuery. Zamysł jednak mam (a nawet dwa) tylko, że nic nie działa :-(

dodajemy do optiona w select name="zodiac" klasę "znak1" i:

[HTML] pobierz, plaintext 
$('.znak1').click(function(){ $('#leo').slideToggle('slow'); 
[HTML] pobierz, plaintext 

albo:

[HTML] pobierz, plaintext 
 
if ($('#zodiac').is(':selected')) {
				$('.#leo').slideDown();
			} else {
				$('this').slideUp(j);
			}
[HTML] pobierz, plaintext 

Macie jakieś pomysły?