ugrás a tartalomhoz

legördülő menü manipulálása javascriptel

barman · 2009. Dec. 2. (Sze), 23.14
Sziasztok

A következő kérdésre várok javaslatokat. Egy kereső oldalt készítek az adatbázisomhoz, amiben állatok vannak. Phpben van irva az oldal, és javascriptel szeretném a legördülő menü értékét módosítani a következő képpen.

Menu1
<select name="allatok">
<option value="30">szárazföldi</option>
<option value="40">vízi</option>
<option value="50">repülő</option>
</select>

ha menu1ben szárazföldi van kiválasztva akkor a következő legördülőben a következő lehetőségeknek kéne megjelenni.

<select name="szárazföldi">
<option value="31">afrikai</option>
<option value="32">európai</option>
<option value="33">amerikai</option>
<option value="34">ázsiai</option>
<option value="35">sarki</option>
</select>

if menu2ben ázsiai menu van kiválasztva akkor

<select name="ázsia">
<option value="351">nagymacskák</option>
<option value="352">hüllők</option>
<option value="353">pókok</option>
</select>

szóval a kérdés az, hogyan lehet kiolvasni a legördülő menü értékét úgy hogy a választástól függően értéket kapjon a következő legördülő menü.

minden segítséget nagyon megköszönök

Szép napot

Barman
‹ Kijelölés tiltása Javascripttel CSS margin body backgroundot kap? ›
 ■
1

onchange esemény

ironwill · 2009. Dec. 3. (Cs), 00.30
Szia!

A kulcs szó, az esemény kezelés.

A html elemeknek vannak különböző eseményei, amikhez műveleteket tudsz rendelni.
  1. <select name="allatok" onchange="animalSelect(this)">  
  2. <option value="30">szárazföldi</option>  
  3. <option value="40">vízi</option>  
  4. <option value="50">repülő</option>  
  5. </select>  
Például a select onchange eseménye, az elem kiválasztáskor történik. Ehhez az eseményhez az "animalSelect" nevű függvényt kötöttem, ami a következő select értékeit fogja betölteni.
  1. var szarazfoldiAllatok = new Array("jaguar", "teve", "antilop");  
  2. var viziAllatok = ...  
  3. var repuloAllatok = ...  
  4.   
  5. function animalSelect(selObj) {  
  6.   if (selObj!=null) {  
  7.     var content = new Array();  
  8.   
  9.     switch (selObj.value) {  
  10.       case 30:  
  11.         content = szarazfoldiAllatok;  //a tartalmát lásd feljebb  
  12.       break;  
  13.       case 40:  
  14.         content = viziAllatok;  
  15.       break;  
  16.       case 50:  
  17.         content = repuloAllatok;  
  18.       break;  
  19.     }  
  20.   
  21.     //ide a következő select id-ja, amibe az adatokat akarod tölteni  
  22.     var animalType = document.getElementById('kovetkezoSelect');  
  23.   
  24.     //ezzel töröljük az előző elemeit a select-nek; azért, hogy csak az legyen benne amit utoljára bele teszünk  
  25.     animalType.length = 0;  
  26.   
  27.     //így adsz hozzá elemet; ajánlom nézd meg a w3schools oldalán pontosan, mert az cross-browser  
  28.     for (var i=0; i<content.length; i++) {  
  29.       animalType.add(content[i], content[i]);  
  30.     }  
  31.   
  32.     //és a következő select-et is ehhez hasonlóan töltöd föl  
  33.   
  34. }  
  35. }  
Remélem tudtam segíteni, ha bármi kérdésed van, írj bátran!
Sok sikert hozzá!

üdv, Gábor
u.i: arra figyelj, hogy véletlenül se használj name-nek, id-nak ékezetes szavakat, inkább használd az angol megfelelőjét a szónak
2

Koszonom szepen,

barman · 2009. Dec. 3. (Cs), 22.40
Koszonom szepen, megprobalkozom vele. Eleg kezdo vagyok meg, ugyhogy vannak dolgok amiket nem ertek. Koszonom megegyszer a segitseget, igazan halas vagyok.

Barman