Forum PHP.pl > [JavaScript] Zalezne listy (select)

Pomoc - Szukaj - Użytkownicy - Kalendarz

Pełna wersja: [JavaScript] Zalezne listy (select)

Forum PHP.pl > Forum > Przedszkole

Komarek

31.03.2010, 19:11:33

Witam

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

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 ?

Prosze o pomoc

#luq

31.03.2010, 20:49:43

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

31.03.2010, 21:04:45

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 ?

mortus

31.03.2010, 21:10:09

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

31.03.2010, 22:16:55

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

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

mortus

1.04.2010, 07:08:38

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:

[HTML] pobierz, plaintext 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
		<script type="text/javascript">
			function rewrite(source, destination) {
				document.forms[0].txt.value = source.value;
				// document.getElementsByName(destination)[0].value = source.value;
			}
		</script>
    </head>
    <body>
    	<form action="" method="post">
    		<select name="sel" onchange="rewrite(this, 'txt')">
    			<option value="Wartość 1">Wartość 1</option>
				<option value="Wartość 2">Wartość 2</option>
				<option value="Wartość 3">Wartość 3</option>
    		</select>
			<input type="text" name="txt" />
    	</form>
    </body>
</html>
[HTML] pobierz, plaintext

Komarek

1.04.2010, 08:07:20

fajny motyw z uciekającym przyciskiem szybkiej odpowiedzi

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

1.04.2010, 08:24:35

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

1.04.2010, 10:37:20

Cytat(Komarek @ 31.03.2010, 20:11:33 )

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

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

add:

ok pokombinowalem

Kod

mortus

1.04.2010, 11:03:15

Może to Ci rozjaśni trochę sprawę

[HTML] pobierz, plaintext 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
		<script type="text/javascript">
			function confirmChange() {
				var wybrano = document.getElementById("sel").value;
				//var wiadomosc = "Wybrałeś pole o wartości " + wybrano;
				if(wybrano == 1) {
					var wiadomosc = "Wybrałeś Wartość 1";
				} else if(wybrano == 2) {
					var wiadomosc = "Wybrałeś wartość 2";
				}
				var gdzie_wpisac = document.getElementById("txt");
				gdzie_wpisac.value = wiadomosc;
			}
		</script>
    </head>
    <body>
        <form action="" method="post">
            <select id="sel" name="sel" onclick="confirmChange();">
                <option value="1">Wartość 1</option>
                <option value="2">Wartość 2</option>
            </select>
            <br/>
            <input type="text" id="txt" name="txt" />
            <br/>
            <input type="submit" name="submit" value="Wyślij" />
        </form>
    </body>
</html>
[HTML] pobierz, plaintext

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.