[JS] Zależne pola "select" i "input"

[mcpunk]

Postanowiłem stworzyć dość złożony kalkulator przy tworzeniu którego nie obejdzie się bez JavaScriptu. Wszystko wskazuje na to, że porwałem się z przysłowiową motyką na przysłowiowe słońce, bo w tym temacie jestem zupełnie zielony - czytam już od kilku dni na ten temat, ale z projektem ruszyć nie mogę w ogóle. Szukałem nawet gotowych skryptów, ale one były zbyt rozbudowane i nie mogłem ich wkomponować do tego kalkulatora. Przejdę do tego z czym mam problem.

1. Zależne Selecty:

Mam trzy pola select. Dwa pierwsze mają rozwijane listy z opcjami, natomiast opcje jakie zobaczymy w trzecim mają być zależne od tego co wybraliśmy w pierwszym i drugim. Zrobiłem oba w html:

<select name="select1" id="aa" style="width: 180px">
<option selected="selected" value="aa0"> </option>
<option value="aa1">aa1</option>
<option value="aa2">aa2</option>
<option value="aa3">aa3</option>
<option value="aa4">aa4</option></select>

<select name="select2" id="bb" style="width: 180px">
<option selected="selected" value="bb0"></option>
<option value="bb1">bb1</option>
<option value="bb2">bb2</option>
<option value="bb3">bb3</option>
<option value="bb4">bb4</option></select>

No i kolej teraz na trzecie pole select. Dla przykładu wybrałem kolejno aa1 i bb1, więc w liście opcji trzeciego selectu chciałbym mieć np. cc1, cc2, cc3, cc4. Gdybym natomiast wybrał aa1 i bb2, to chciałbym tam zobaczyć dajmy na to dd1, dd2, dd3, dd4. Pragnę zaznaczyć, że te opcje z selectu trzeciego będą później jeszcze wykorzystywane do dalszych obliczeń - w zależności od tego co wybierzemy, zostanie zwrócony pewnien parametr, który będzie użyty przy wzorze obliczeniowym.

A może znacie jakiś sposób wprowadzenia wszystkich możliwych opcji jedna za drugą tak jak w select1 i select2, tylko że przy każdej podawałoby się jakiś parametr powodujący jej wyświetlenie w zależności od tego, czy przypisana do niego opcja w select 1 i select2 została wybrana?

2. Zależne pola input.

<input class="oneleft" name="inputnr1" value="" size="4" maxlength="" readonly="readonly" type="text">

Pola input mają wyświetlić frazę w zależności od tego co wybiorę w polach select. Planuję dwa typy inputów:

Pierwszy, to taki, który będzie korzystał tylko z jednego pola select - gdy w select2 wybiorę bb1, to ma zwrócić dajmy na to fraza1, a gdy bb2, to fraza2.

Drugi typ to taki, gdzie zawartość zależy od dwóch pól select. Jeśli w select1 wybiorę aa1, a w select2 bb1, to chcę by spowodowało to zwrócenie wartości1, a gdy aa1 i bb2 to wartość2

Tak jak już pisałem - nie znam się na tym w ogóle i czuję się zagubiony jak dziecko we mgle, gdy próbuję sklecić te skrypty - na chwilę obecną porażka za porażką. Jeśli ktoś potrafiłby pomóc, to fajnie by było, by ewentualny przykładowy kod był prosty i oparty na tych wartościach które podałem, bo chciałbym to ogarnąć i wykorzystywać później wielokrotnie.

Na chwilę obecną mam tyle pytań, na ewentualne następne przyjdzie czas, gdy sobie sam z nimi nie poradzę. Mogę liczyć na Waszą pomoc?

[[Ekspert] Hakken]

może napisz na początek co jest co, ba ja się czuję zagubiony w gąszu aa2 cc3 i fraza8, podczas gdy tak naprwdę nie wiem, co chcesz osiągnąć.

No i skoro zaczynasz, to polecam zaczynać z jakimś kursem, gdzie są gotowe ćwiczenia dopasowane do tego, co powinieneś do danego momentu opanować.

[mcpunk]

te wszytkie znaczki dałem po to, by było uniwersalnie. Dla przykładu próbowałem skorzystać z tego:

http://www.javascrip...iplecombo.shtml

tam są te selecty z opcjami, a ja te znaczki typu aa1, aa2 podałem zamiast tamtejszych "make a selection", "wearing appael", oraz "books" w pierwszym okienku.

Próbowałem adaptować to na swoje potrzeby, ale tutaj jest to właśnie zbyt rozbudowane i tak jakby okienka select poziązane są pierwsze z drugim, a drugie z trzecim. Ja chcę by tylko trzecie było w javascripcie i zależało jednocześnie od pierwszego i drugiego.

A z okienkami input chodzi mi o to, by po prostu pokazał się w nich jakiś tekst w zależności od tego co wybiorę w okienku select.

Edit:

Co do pola input zależnego od selecta zrobiłem coś takiego:

Tutaj mam select:

<select name="select1" id="ct" style="width: 180px" onchange="document.getElementById('select1').value = this value">
  <option selected="selected" value="ct0"></option>
  <option value="ct1">jeden</option>
  <option value="ct2">dwa</option></select>

Tutaj mam pole input:

<input class="oneleft" name="poleinput" id="pi" size="4" maxlength="" readonly="readonly" type="text"
onchange="document.getElementById('poleinput').value = this value">

A tutaj skrypt jaki próbowałem sklecić:

<script language="JavaScript">

document.getElementById('poleinput').value
 {
  var poleinput = document.getElementById("select1").value;
   {
    if (select1.value == ct1) {
    alert('informacja1')
	 }
    if (select1.value == ct2) {
	 alert('informacja2')
	 }
   }
 }
</script>

[piotrekn]

Zastanawiam się, czy nie byłoby dla ciebie najlepszym rozwiązaniem jQuery, choc i bez niego powinno zaskoczyć.

Nie wiem skąd u ciebie wywołyywanie przypisania wartości do niej samej przy zmianie:

onchange="document.getElementById('poleinput').value = this value"

Wydaje mi się, że powinieneś zadeklarować sobie na początku pewną funkcję, która generowałaby listę/zawartość dla trzeciego selecta na podstawie zawartości dwóch pierwszych, a przy każdej zmianie wartości selectów 1 i 2 ją wywoływać. Coś na kształt tego:

<script type="text/javascript">
function createList() {
    var sel1 = document.getElementbyId("sel1").value,
        sel2 = document.getElementById("sel2").value;
    //Tu ustalasz Javascriptowo zawartość trzeciego selecta na podstawie sel1 i sel2
}
</script>
<body onload="createList()">
    <select id="sel1" onchange="createList()"></select>
    <select id="sel2" onchange="createList()"></select>
    <select id="final"></select>
</body>

Musiałbyś zaprojektować sobie procedurę zapełniania trzeciej listy (o id "final"). Znajdziesz jej przykład na podlinkowanej przez siebie stronie oraz w ogóle w internecie.

Przy okazji: między this a value powinna być kropka.