Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: Wielopoziomowy input select
Forum PHP.pl > Forum > Po stronie przeglądarki > JavaScript
juzekmj
21.06.2012, 23:45:00
Cześć, chciałbym na stronie umieścić wielopoziomowy input select, tzn. jeśli wybiorę z rozwijanej listy pierwszej opcje A, to w liście drugiej wyświetlą się inne opcje, niż gdybym wybrał z listy pierwszej opcje B.
Znalazłem jeden przykład, ale był strasznie skomplikowany, pobierał dane z bazy, miał kilka zupełnie nieprzydatnych funkcji - nie oto mi chodzi. Szukam najprostszego rozwiązania.

Do tej pory udało mi się stworzyć coś takiego i na tym niestety moja wiedza z JSa się kończy.

Kod
<script type='text/javascript'>
function toggle(div) {
var ile = document.getElementById('select').options.length;
for(var i=1; i<=ile; i++) {
var which = 'w'+i;
if(which == div) { document.getElementById(which).style.display = 'block'; }
else if(which != div) { document.getElementById(which).style.display = 'none'; }
}
}
</script>

<form action=index.php method=post name=form>
          <div id=w1>
                    <select name=select_w1 id=select onChange=toggle(this.value) onClick='this.form.reset()'>
                    <option value=w1 selected=selected>Wybierz</option>
                    <option value=w2>1</option>
                    <option value=w3>2</option>
                    <option value=w4>3</option>
                    </select>
          </div>
          <div id=w2 style=display:none>
                         <select name=select_w2 id=select onChange=toggle(this.value) onClick='this.form.reset()'>
                         <option value=w1>Wybierz</option>
                         <option value=w2 selected=selected>1</option>
                         <option value=w3>2</option>
                         <option value=w4>3</option>
                         </select>
                    <select id=select name=w4>
                    <option>Wybierz</option>
                    <option>Tu wpisz pierwszą możliwość 2</option>
                    <option>Tu wpisz drugą możliwość 2</option>
                    </select>
          </div>
          <div id=w3 style=display:none>
                         <select name=select_w3 id=select onChange=toggle(this.value) onClick='this.form.reset()'>
                         <option value=w1>Wybierz</option>
                         <option value=w2>1</option>
                         <option value=w3 selected=selected>2</option>
                         <option value=w4>3</option>
                         </select>
                    <select id=select name=w4>
                    <option>Wybierz</option>
                    <option>Tu wpisz pierwszą możliwość 3</option>
                    <option>Tu wpisz drugą możliwość 3</option>
                    </select>
          </div>
          <div id=w4 style=display:none>
                         <select name=select_w4 id=select onChange=toggle(this.value) onClick='this.form.reset()'>
                         <option value=w1>Wybierz</option>
                         <option value=w2>1</option>
                         <option value=w3>2</option>
                         <option value=w4 selected=selected>3</option>
                         </select>
                    <select id=select name=w4>
                    <option>Wybierz</option>
                    <option>Tu wpisz pierwszą możliwość 4</option>
                    <option>Tu wpisz drugą możliwość 4</option>
                    </select>
          </div>
<a id=apparatus_search_button href=java script:document.form.submit()>OK</a></form>


Obecnie w formularzu wysyłane są wszystkie selecty, ale wydaje mi się że gdyby skrypt oprócz display diva zmianiał też wartość select na disabled to funkcja mogłaby zadziałać.

Mam nadzieję że wpadniecie na coś mądrzejszego niż ja wink.gif

Dzięki i pozdrawiam.
gr56
24.06.2012, 22:24:14
Jeśli usuniesz z selecta atrybut name to nie powinien on się przesyłać.
kamil4u
24.06.2012, 22:32:29
Jeżeli chcesz zablokować element to to się robi tak, że w pętli zablokowujesz wszystkie, a następnie tego co chcesz odblokować odblokowujesz. Kod
Kod
element.disabled = true;
zablokuje element. false, odblokuje. Element to konkretny element HTML i dostajesz się do niego poprzez DOM: getElementById, getElementsByTagName itd.

----
Niestety nie czytałem tematu i nie analizowałem kodu, więc nie wiem na ile to rozwiązanie Ci się przyda.

--edit--
Przy Twoim kodzie z tego co widzę wiele do roboty nie ma smile.gif Daj po prostu document.getElementById(which).disabled = true/false; i powinno działać smile.gif

Ew. takim zgrabnym rozwiązaniem byłoby też tworzenie tych list dynamicznie w JS za pomocą metod DOM-owskich. Ale sam Twój pomysł też jest doby.
To jest wersja lo-fi głównej zawartości. Aby zobaczyć pełną wersję z większą zawartością, obrazkami i formatowaniem proszę kliknij tutaj.
Invision Power Board © 2001-2025 Invision Power Services, Inc.