Wyświetlanie ukrytego div przy wybraniu opcji <select><option>

0

Cześć,

chciałbym, aby wybrana opcja pokazywała ukrytego div'a.
O ile wiem jak to zrobić i kod działa prawie poprawnie, to chciałbym dorzucić jedną rzecz.
Otóż jeśli opcja przyjmuje jakąś wartość która ma z założenia pokazać tego div'a, to pokazuje go tylko gdy zostanie on wybrany.
A jeśli jest zmieniony i strona zostanie odświeżona, to div nie zostaje odkryty.

Jak temu zaradzić.
W poniższym przykładnie widać, że opcja "red" nie wyświetla nic. A chciałbym, aby domyślnie coś wyświetliła, a nie dopiero po zmianie.
html

<Select id="colorselector">
   <option value="red">Red</option>
   <option value="yellow">Yellow</option>
   <option value="blue">Blue</option>
</Select>
<div id="red" class="colors" style="display:none"> red... </div>
<div id="yellow" class="colors" style="display:none"> yellow.. </div>
<div id="blue" class="colors" style="display:none"> blue.. </div>

js/jquery

    $(function() {
        $('#colorselector').change(function(){
            $('.colors').hide();
            $('#' + $(this).val()).show();
        });
    });

Tutaj linka do jsfiddle http://jsfiddle.net/FvMYz/

Za pomoc z góry dziękuję.

0

ja tam już dzisiaj lekko wstawiony jestem ale jeśli coś domyślnie ma nie być ukryte to tego nie ukrywaj

<Select id="colorselector">
   <option value="red">Red</option>
   <option value="yellow">Yellow</option>
   <option value="blue">Blue</option>
</Select>
<div id="red" class="colors" > red... </div>
<div id="yellow" class="colors" style="display:none"> yellow.. </div>
<div id="blue" class="colors" style="display:none"> blue.. </div>
0

Tak,
chyba źle sformułowałem pytanie ;)
Ten przykład jest w zasadzie tylko przykładem jak to ma działać.

Ogólnie jest tak, że domyślnie element jest niewidoczny i tak ma być.
Jak jest wybrana opcja, to ma być widoczny.
Ale po odświeżeniu go nie widać, a powinno...

Twoje rozwiązanie jest oczywiście logiczne...
ps. dziś też piwny wieczór, może mnie jutro oświeci!? Dzięki!

0

Przy zmianie zapisz indeks #colorselector do localstorage, przy wczytywaniu strony ustawiaj tenże indeks elementu jako zaznaczony w #colorselector.
Może się to wiązać z drobnymi komplikacjami - F5 działa inaczej niż Ctrl+F5 czy enter w pasku adresu, ponadto powrót do strony poprzez nawigację przód/tył może nie wykonać js (da się to obejść w razie czego).

1 użytkowników online, w tym zalogowanych: 0, gości: 1