Ukrywanie bloku DIV, Ukrywanie po wybraniu opcji na rozwijanej liście Opcje

[anm]

Chciałbym prosić o pomoc w prostym skrypcie. Wybranie jednej z opcji na rozwijanej liście ukrywałoby (lub pokazywało) blok <div>.

Potrzebuję zrobić dokładnie coś takiego:
Lista Shoe Size w tym sklepie służy do wybierania rozmiaru buta. Po wybraniu rozmiaru cena automatycznie zmienia się. Cena zawarta jest w bloku

[HTML] pobierz, plaintext 
<div class="price-box">...</div>
[HTML] pobierz, plaintext 

Chciałbym aby blok ten był ukryty zawsze, gdy nie wybrano żadnego rozmiaru, czyli gdy na liście wybrany jest napis "Coose an Option...". Aby ukryć blok trzeba by mu nadać styl visibility:hidden, lub po prostu nadać mu wcześniej zdefiniowaną klasę "ukryty", która miałaby już ten styl.

Nie znam się na JavaScript, ale wygląda to na prosty skrypt. Będę bardzo wdzięczny za wszelką pomoc.

[zegarek84]

moim zdaniem jeśli już coś chcesz ukrywać to cały blok razem z dodaniem do koszyka... poza tym nie widzę, by cena tam się zmieniała - jeśli by się zmieniała to wystarczyło by wyświetlić tam pusty tekst domyślnie... jako, że nie wszystkie przeglądarki obsługują getElementsByClassName to wziąłem trochu inaczej - ale to mało ważne jak znajdziesz te elementy - wystarczy je znaleźć i podać jako parametr funkcji którą teraz Ci podam... dodaj ten skrypt za formularzem:

Kod

<script type="text/javascript">
(function() {
    var $select = document.getElementById('attribute502'),
    $el = document.getElementById('product-price-135_clone').parentNode.parentNode,
    sprawdz_by_ukryc = function($select, $el){
        if(!$select || !$el) throw new Error('nie zdefiniowany select lub element');
        $select.onchange = function() {
            $el.style.visibility = (isNaN(parseInt(this.value)))?'hidden':'visible';
        }
    };
    $el.style.visibility = 'hidden'; /* domyślnie ukryty blok */
    /* podpięcie listenera pod onchange - można zwykłymi listenerami zamiast na sztywno - nawet wskazane przebudowanie funkcji powyżej */
    sprawdz_by_ukryc($select, $el);
})()
</script>

Ten post edytował zegarek84 21.09.2010, 11:57:04

[anm]

Dziękuję, zaraz to przetestuję.

A przykład ze zmienianiem cen można zobaczyć TUTAJ, przedtem pomyliłem link, przepraszam.

Wszytko działa pięknie, jeszcze raz wielkie dzięki.

Pisałeś, że jeśli cena by się zmieniała (tak jak w tym przykładzie) to "wystarczyło by wyświetlić tam pusty tekst domyślnie". Pomyślałem sobie, że zamiast tego pustego tekstu, można by wyświetlić "wybierz opcję". Czy mógłbyś pokazać, jak to zrobić?

W tym przykładzie cena jest wyświetlana w dwóch miejscach (różne ID), więc załóżmy, że jest wyświetlana tylko w jednym. Chyba, że byłbyś w stanie pokazać mi, jak dobrać się do boksów z cenami odszukując je po nazwie klasy (oba mają takie same).

Pozdrawiam

A jeszcze jedno, jakie przebudowanie funkcji miałeś na myśli, pisząc, że jest wskazane? Jakaś poważna wada?

[zegarek84]

widzę, że jest zaimplementowany framwork Prototype... więc ceny do zmiany wartoci odnajdziesz w ten sposób:
$$('.product-essential .price') - jest to tablica cen składająca się z 2 elementów - więc pierwszy to $$('.product-essential .price')[0]

nie wiem jak masz zmieniane ceny - nie chce mi się szukać skryptu - czy przez DOM czy przez innerHTML - jedno z drugim może nie grać jeśli element jest nadpisywany...

pasuje jeszcze gdy ceny nie będzie ukryć box z zatwierdzeniem zakupu który odszukać można przez:
$$('.product-essential .add-to-cart')[0]

co do przebudowania funkcji miałem na myśli zmianę zdażenia onchange na listenera addEventListener('change', funkcja, false) [na IE to z atachEvent...] - ale skoro jest prototype to z Event.observe