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

[askone]

Spróbujmy inaczej:

[JAVASCRIPT] pobierz, plaintext 
$("#zodiac").change(function(){
 if($(this).val == 'leo')
 {
   $("#virgo").slideUp('slow', function(){ $("#leo").slideDown('slow');});
 }
 else
 {
   $("#leo").slideUp('slow', function(){ $("#virgo").slideDown('slow');});
 }
});
[JAVASCRIPT] pobierz, plaintext 

Oczywiście standardowo pisane z palca, bez testów (IMG:style_emoticons/default/winksmiley.jpg) Ale są szanse, iż będzie działać...

edit: pomyliłem kolejność wywołania slideUp i slideDown

Ten post edytował askone 27.08.2010, 11:35:10