Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [JavaScript] Zalezne listy (select)
Forum PHP.pl > Forum > Przedszkole
Komarek
Witam

Jako ze jestem cienki bolek z js'a prosze o pomoc biggrin.gif



mam cos takiego
Kod
<select name="1">
<option>-Wybierz-</option>
<option>Wybor 1</option>
<option>Wybor 2</option>
</select>

I teraz mam druga liste ale chce by dzialala w taki sposob:

Jezeli w select =1 wybrano opcje Wybor 1, lista wyglada tak

Kod
<select name="11">
<option>-Wybierz-</option>
<option>Wybor 1 -> 1</option>
<option>Wybor 1 -> 2</option>
</select>


natomiast jezeli w pierwszej liscie wybrano opcje Wybor 2, lista ma wygladac tak:

Kod
<select name="21">
<option>-Wybierz-</option>
<option>Wybor 2 -> 1</option>
<option>Wybor 2 -> 2</option>
</select>


Jak to zrobic ? smile.gif

Prosze o pomoc smile.gif
#luq
A gdzie atrybuty value do <option />?

Ogólnie możesz ukrywać i wyświetlać dany <select /> (CSS: display) po zdarzeniu onchange.
Tylko należy się zastanowić czy aby na pewno chcesz mieć inne name dla różnych podwyborów bo to może potem komplikować kod po stronie serwera.
Komarek
znalazlem cos takiego
Kod
http://www.mattkruse.com/javascript/dynamicoptionlist1/


I mam problem aktualnie zeby zrobic PO zatwierdzeniu przyciskiem submit, tak by wartosci sie zapisywaly.
Wie ktos jak to zrobic ? biggrin.gif
mortus
Przede wszystkim to name nie mogą być takie, ponieważ według standardów name nie może zaczynać się od cyfry.
Cytat
Tylko należy się zastanowić czy aby na pewno chcesz mieć inne name dla różnych podwyborów bo to może potem komplikować kod po stronie serwera.
Zgadzam się. To nie tylko może, ale z pewnością skomplikuje kod po stronie serwera. Zatem name dla select-ów powinno być zawsze jednakowe, natomiast dowolnie możemy modyfikować value każdej opcji.
Komarek
name juz pozmienialem itp ...

A jeszcze jedno pytanie zeby nie zakladac dodatkowego tematu:

Jak w javascripcie zrobic cos takiego:

mam
Kod
<select name="droga_w_zyciu">
<option name="asd1">Prosta
<option name="asd2">Kreta
<option name="asd3">Nieskonczona
</select>


I teraz pytanie jak zrobic by w zaleznosci od wyboru w tej liscie,
w ponizszym
Kod
<input type="text">


Pojawial sie tekst wybrany przeze mnie ?

Tzn
jezeli droga_w_zyciu = asd1 to tekst "Wybrales Prosta Droge"
jezeli asd2 to "Wybrales Kreta Droge"

itd...

Pomozcie prosze smile.gif
mortus
Do wartości wybranego (selected) elementu masz dostęp poprzez jedną z funkcji getElementById, getElementsByTagName, getElementsByClassName, getElementsByName (jedna z tych funkcji nie działa pod IE, ale nie pamiętam która) lub poprzez DOM document.forms[0].name, gdzie name, to name pola. Przykład:
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
  5. <script type="text/javascript">
  6. function rewrite(source, destination) {
  7. document.forms[0].txt.value = source.value;
  8. // document.getElementsByName(destination)[0].value = source.value;
  9. }
  10. </script>
  11. </head>
  12. <body>
  13. <form action="" method="post">
  14. <select name="sel" onchange="rewrite(this, 'txt')">
  15. <option value="Wartość 1">Wartość 1</option>
  16. <option value="Wartość 2">Wartość 2</option>
  17. <option value="Wartość 3">Wartość 3</option>
  18. </select>
  19. <input type="text" name="txt" />
  20. </form>
  21. </body>
  22. </html>
Komarek
fajny motyw z uciekającym przyciskiem szybkiej odpowiedzi tongue.gif

ale niestety nie do konca mi o to chodzi...

potrzebuje skryptu ktory dziala na zasadzie 'if'

mam cos takiego

Kod
<select name="droga_w_zyciu">
<option name="asd1">Prosta
<option name="asd2">Kreta
<option name="asd3">Nieskonczona
</select>


zgodnie z twoja odpowiadzia, skrypt mi wyswietli w polu, asd1 lub asd2 badz asd3.

Jednak ja potrzebuje czegos dzieki czemu OKRESLE wyswietlany tekst ale nie w tagu <option>

cos ala

Kod
if (droga_w_zyciu == "asd1")
<input value="Moj tekst 1">
if (droga_w_zyciu == "asd2")
<input value="Moj tekst 2">
if (droga_w_zyciu == "asd3")
<input value="Moj tekst 3">


Da rade cos takiego zrobic ?
thek
Musisz więc odnieść się do elementu który chcesz zmienić i mu atrybut value ustawić w zależności od wyboru. Najprościej gdy ów element ma jakieś id. Podczas zmiany wartości w select (zdarzenie onChange) odwołasz się przez getElementById('tutaj_id_do_zmiany') i ustawisz value.
Komarek
Cytat(Komarek @ 31.03.2010, 20:11:33 ) *
Jako ze jestem cienki bolek z js'a prosze o pomoc biggrin.gif


Gdybys to samo powiedzial mi w php, to wiedzialbym jak zrobic ale dopiero ucze sie js i nie mam zielonego pojecia jak to zrobic.
"Patrzalem" juz w if...else poradnikach js ale nic mi to nie mowi biggrin.gif

add:

ok pokombinowalem tongue.gif

Kod
            function rewrite(source, destination) {
                if(source.value == "wybierz")
                {
                var tekst = "wybierz cos";
                }
                else if(source.value == "asd1")
                {
                var tekst = "Super";
                }
                else if(source.value == "asd2")
                {
                var tekst = "Extra";
                }
                else if(source.value == "asd3")
                {
                var tekst = "Zarabiscie";
                }
                document.forms[0].txt.value = tekst;
                
            }
mortus
Może to Ci rozjaśni trochę sprawę
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
  5. <script type="text/javascript">
  6. function confirmChange() {
  7. var wybrano = document.getElementById("sel").value;
  8. //var wiadomosc = "Wybrałeś pole o wartości " + wybrano;
  9. if(wybrano == 1) {
  10. var wiadomosc = "Wybrałeś Wartość 1";
  11. } else if(wybrano == 2) {
  12. var wiadomosc = "Wybrałeś wartość 2";
  13. }
  14. var gdzie_wpisac = document.getElementById("txt");
  15. gdzie_wpisac.value = wiadomosc;
  16. }
  17. </script>
  18. </head>
  19. <body>
  20. <form action="" method="post">
  21. <select id="sel" name="sel" onclick="confirmChange();">
  22. <option value="1">Wartość 1</option>
  23. <option value="2">Wartość 2</option>
  24. </select>
  25. <br/>
  26. <input type="text" id="txt" name="txt" />
  27. <br/>
  28. <input type="submit" name="submit" value="Wyślij" />
  29. </form>
  30. </body>
  31. </html>
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.