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]

Hej

Zobacz tutaj

Pozdrawiam

[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?

[askone]

Spróbuj tak:

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

A poza tym to czytaj dokumentację, szczególnie dział o selektorach bo je mylisz

Pozdrawiam

[cachaito]

Nie działa :-/

[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 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