Skocz do zawartości


Zdjęcie

[ajax/js] Dynamiczna zmiana pól w select


  • Zaloguj się, aby dodać odpowiedź
1 odpowiedź w tym temacie

#1 Azetix

Azetix

    Obserwator

  • 5 postów

Napisano 28 04 2008 - 16:40

Witam. Chciałbym się dowiedzieć, czy za pomocą JS można dynamicznie zmieniać pola option w select.
Np.: Mam pole select i tam 4 opcje o różnych wartościach. Poniżej mam jeszcze jedno pole select, które chciałbym, aby wyświetliło różne opcje wyboru w zależności od wyboru w select'cie pierwszym.
Select pierwszy:
<select name="jeden" id="jeden">
<option value="Pierwsza">Opcja pierwsza</option>
<option value="Druga">Opcja druga</option>
</select>

Select drugi:
- po wybraniu "Opcja pierwsza":
<select name="dwa" id="dwa">
<option value="Pierwsza_01">Opcja no.1</option>
<option value="Pierwsza_02">Opcja no.2</option>
</select>
- po wybraniu "Opcja druga":
<select name="dwa" id="dwa">
<option value="Druga_01">Opcja no.3</option>
<option value="Druga_02">Opcja no.4</option>
</select>


Pewnie jest proste coś takiego zrobić, ale proszę wybaczyć bo jestem noga z JavaScript.

Pozdrawiam,
Azx

  • 0

#2 Kai

Kai

    Stały użytkownik

  • 237 postów

Napisano 02 05 2008 - 15:43

Przykład w JavaScriptcie.
<script type="text/javascript">
arrObj = new Array(); // jeśli chcesz przypisywać jako wartości do obiektu to może być Object(); też;]
arrObj['nazwa1'] = [1, 2, 3];
arrObj['nazwa2'] = ['x', 'y', 'z'];
</script>
Zasada jest taka, że powyżej tworzysz tablicę tablic, indeksowaną w następujący sposób: arrObj[indeks_asocjacyjny][indeks_numeryczny]. Asocjacyjny znaczy tyle, że indeksem jest ciąg znaków literowych - to tak uogólniając. Dla przykładu: arrObj['monitory'][0]. I teraz jak to wykorzystać w Twoim problemie? Prosto. Wartości option pierwszego selecta uzupełniasz tak, żeby ich nazwy pokrywały się z pierwszym indeksem tablicy (tym asocjacyjnym). Drugi indeks za to, będzie wymiarem odpowiadającym za odwołanie do drugiego selecta, wybieranego po zmianie w pierwszym. Dla przykładu, jeżeli jeden z wyborów pierwszego selecta ma mieć wartość monitor, a po wyborze w drugim mają pojawić się wartości raz i dwa to musisz wygenerować następującą tablicę tablic:
arrObj['monitor'][0] = 'raz';
arrObj['monitor'][1] = 'dwa';
Po wygenerowaniu tablicy wszystkich możliwości po prostu za pomocą jakieś funkcji odwołujesz się do nich zapełniając na nowo select, np. za pomocą document.getElementById, pętli i dodatkowych warunków.

A tu przykład działania samej tablicy:
for ( var key in arrObj )
{
	for ( i = 0; i < 3; ++i )
	{
		document.write(arrObj[key][i] + '<br />');
	}
}


  • 0




Użytkownicy przeglądający ten temat: 0

0 użytkowników, 0 gości, 0 anonimowych