Wielopoziomowy input select Opcje

[juzekmj]

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 (IMG:style_emoticons/default/wink.gif)

Dzięki i pozdrawiam.

[gr56]

Jeśli usuniesz z selecta atrybut name to nie powinien on się przesyłać.

[kamil4u]

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 (IMG:style_emoticons/default/smile.gif) Daj po prostu document.getElementById(which).disabled = true/false; i powinno działać (IMG:style_emoticons/default/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.

Ten post edytował kamil4u 24.06.2012, 22:35:12