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.
<select name="allatok" onchange="animalSelect(this)">
<option value="30">szárazföldi</option>
<option value="40">vízi</option>
<option value="50">repülő</option>
</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.

var szarazfoldiAllatok = new Array("jaguar", "teve", "antilop");
var viziAllatok = ...
var repuloAllatok = ...

function animalSelect(selObj) {
  if (selObj!=null) {
    var content = new Array();

    switch (selObj.value) {
      case 30:
        content = szarazfoldiAllatok;  //a tartalmát lásd feljebb
      break;
      case 40:
        content = viziAllatok;
      break;
      case 50:
        content = repuloAllatok;
      break;
    }

    //ide a következő select id-ja, amibe az adatokat akarod tölteni
    var animalType = document.getElementById('kovetkezoSelect');

    //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
    animalType.length = 0;

    //így adsz hozzá elemet; ajánlom nézd meg a w3schools oldalán pontosan, mert az cross-browser
    for (var i=0; i<content.length; i++) {
      animalType.add(content[i], content[i]);
    }

    //és a következő select-et is ehhez hasonlóan töltöd föl

}
}
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