Modern ismeretek WEB oldalon : Javascript ismertető HTML formátumban

Option objektum

Az options objektum bemutatása
Új elem hozzáfűzése a választólistához JavaScript 1.0Netscape2.0MS IE4.0
Elem törlése a választólistából JavaScript 1.0Netscape2.0
Elemváltozók (tulajdonságok) :
default selected MódosíthatóJavaScript 1.1Netscape3.0MS IE4.0 Előre kiválasztott elem
length Csak olvashatóJavaScript 1.0Netscape2.0MS IE3.0 A választólista elemszáma
selected MódosíthatóJavaScript 1.0Netscape2.0MS IE3.0 Választott elem a listából
selectedIndex MódosíthatóJavaScript 1.0Netscape2.0MS IE3.0 Választott elem a listából
text MódosíthatóJavaScript 1.0Netscape2.0MS IE3.0 A választott elem a szöveges tartalma
value Csak olvashatóJavaScript 1.0Netscape2.0MS IE3.0 A választólista belső értéke
Alárendelt objektumok : nincs

Az option objektum bemutatása

A option objektum által, mely a JavaScript objektum hierarhiában a  element objektum alatt található, lehetőségünk van az űrlap választólistájában levő elemek elérésére. Ezt többféle módon is megtehetjük :

Példa1:

document.forms[#].elements[#].options[#].tulajdonság
document.forms[#].elements[#].tulajdonság

document.forms[0].elements[0].options[4].text = "valami";
document.forms[0].elements[0].selectedIndex = 2;

Példa2:

document.űrlapneve.elemneve.options[#].tulajdonság
document.űrlapneve.elemneve.options.tulajdonság

document.urlap.valasztas.options[4].text = "valami";
document.urlap.valasztas.selectedIndex = 2;

Magyarázat:

Az első elem sorszáma: 0, az utolsó: length -1. Az űrlapokon levő választólista elemeit kétféle módon szólíthatjuk meg :

  • sorszámmal, ahol az első elem sorszáma : 0 az utolsó : length -1 / Példa 1
  • névvel, ahogy az a name= után lett megadva / Példa 2

JavaScript 1.0Netscape2.0MS IE4.0 Új elem hozzáfűzése a választólistához

A JavaScript option objektum segítségével új elemet fűzhetünk a választólistához vagy egy már meglevő elemet lecsererélhetünk egy másikra.

Példa:

<html><head><title>teszt</title>
<script language="JavaScript">
function hozzafuz(){
 ujertek = new Option(document.urlap.uj.value);
 document.urlap.valaszt.options[document.urlap.valaszt.length]=ujertek;
 document.urlap.uj.value = "";
}
</script>
</head><body>
<form name="teszt">
<select name="valaszt" size=8>
 <option>Mária
</select>
<br>
<input name="uj">
<input type=button value="Hozzáfűzni" onClick="hozzafuz()">
</form>
</body></html>

Magyarázat:

A példában egy olyan űrlapot mutatunk be, melyen egy választólista, egy beviteli mező és egy nyomógomb látható. A választólistán már van egy előre bevitt érték. A gomb megnyomásával a beviteli mező tartalmát hozzáfűzi a választólistához. A gomb megnyomásakor a hozzafuz() saját készítésű függvény kerül meghívásra, melyet a fejrészben deklaráltunk.Ebben egy Option objektumut hozunk létre, melynek paramétere a beviteli mező szöveges tartalma.Ezt az értéket fogjuk aztán a választólista utolsó eleme után hozzáfűzni. Az utolsó elem sorszámát a length elemváltozó sagítségével kapjuk meg, végül töröljük a beviteli mező tartalmát. Ha a példával ellentétben a választólista elejére szeretnénk az új elemet bevinni, akkor a következő utasítást kell kiadni : document.urlap.valaszt.options[0] = ujertek;

Figyelje meg :

Ha a választólistán már meglévő listaelemre hivatkozunk, akkor annak tartalmát felülírja, különben hozzáfűzi.

JavaScript 1.0Netscape2.0 A választólista elemének törlése

Ezt csak a Netscape böngészők engedik meg, a Microsoft Internet Explorer-nél nem lehetséges.

Példa:

<html><head><title>teszt</title>
<script language="JavaScript">
function torol() {
 document.urlap.valaszt.options[document.urlap.valaszt.length-1]=null;
 history.go(0);
}
</script>
</head><body>
<form name="tesztform">
<select name="valaszt" size=8>
 <option>Mária<option>Kati<option>Nóra<option>Ági
 <option>Edit<option>Vera<option>Juli<option>Ilona
</select>
<br>
<input type=button value="Törlés" onClick="torol()">
</form>
</body></html>

Magyarázat:

A példában egy olyan űrlapot mutatunk be, melyen egy választólista és egy nyomógomb látható. A választólistán már van több előre bevitt érték. A gomb megnyomásával az utolsó elemet törli a listából. A gomb megnyomásakor a torol() függvény kerül meghívásra, melyet a fejrészben deklaráltunk. Az utolsó elem a length -1 sorszámú. Ha az első elemet akarjuk törölni a listából akkor elemsorszámként 0-át kell megadni. A törlés ténylegesen azáltal valósul meg, hogy az elem érétékének null -t adunk. Ezután még a kijelzés frissítése is szükséges, melyet a history.go(0) parancs kiadásával érünk el.

MódosíthatóJavaScript 1.1Netscape3.0MS IE4.0 defaultSelected

Megadja, hogy az adott elem előre választott-e. Értéke true vagy false lehet.

Példa:

<html><head><title>teszt</title>
<script language="JavaScript">
function val_torl(){
 for(i=0; i<document.urlap.valaszt.length; i++)
   if(document.urlap.valaszt.options[i].defaultSelected == true)
     document.urlap.valaszt.options[i].selected=true;
}
</script>
</head><body>
<form name="teszt">
<select name="valaszt" size=8>
 <option>Mária<option>Kati<option>Nóra<option selected>Ági
 <option>Edit<option>Vera<option>Juli<option>Ilona
</select>
<br>
<input type=button value="Eredeti választás" onClick="val_torl()">
</form>
</body></html>

Magyarázat:

A példában egy olyan űrlapot mutatunk be, melyen egy választólista és egy nyomógomb látható. A választólistán már van több előre bevitt érték. Ezek közül a negyedik (Ági) a kiválasztott elem. Ha a felhasználó választ egy másk elemet és utána megnyomja a gombot, akkor újra az előre megadott választás lesz érvényben.. A gomb megnyomásakor a val_torl() függvény kerül meghívásra, melyet a fejrészben deklaráltunk. Az előválasztott elemre egy  for ciklus segítségével mutatunk rá. Ha a ciklus elemszáma megegyezik a előválasztott elem sorszámával, akkor az lesz selected .

Csak olvashatóJavaScript 1.0Netscape2.0MS IE3.0 length

Megadja választólista elemeinek számát.

Példa:

<html><head><title>teszt</title>
</head><body>
<form name="urlap">
<select name="valaszt" size=8>
 <option>Mária<option>Kati<option>Nóra<option>Ági
 <option>Edit<option>Vera<option>Juli<option>Ilona
</select>
</form>
<script language="JavaScript">
document.write
("Válasszon a " + document.urlap.valaszt.length + " elem közül egyet");
</script>
</body></html>

Magyarázat:

A példában egy űrlapot mutatunk be, melyen egy választólista látható. Az űrlap definició alatt egy JavaScript területet jelöltünk ki. Így a HTML fájl betöltése után közvetlenül az űrlap, majd a JavaScript utasítások értelmezése következik. A  document write() metódus hívásával dinamikusan írjuk ki a választólista elemszámát.

MódosíthatóJavaScript 1.0Netscape2.0MS IE3.0 selected

Megadja, hogy az adott elem kiválasztott-e. Értéke true vagy false lehet.

Példa:

<html><head><title>teszt</title>
<script language="JavaScript">
function ellenoriz(){
 if(document.urlap.valaszt.options[2].selected == true)
  {alert("Ez választás nem érvényes"); return false; }
 return true;
}
</script>
</head><body>
<form name="urlap" onSubmit="return ellenoriz()">
<select name="valaszt" size=8>
 <option>Mária<option>Kati<option>Nóra<option>Ági
 <option>Edit<option>Vera<option>Juli<option>Ilona
</select><br>
<input type=submit value="Elküld">
</form></body></html>

Magyarázat:

A példában egy olyan űrlapot mutatunk be, melyen egy választólista és egy submit gomb látható. A gomb megnyomásakor, az onSubmit= eseménykezelő az ellenoriz() függvényt hívja, melynek visszatérő értéke csak akkor true, ha nem a 2. sorszámú elemet választottuk ki. Csak ilyenkor lesz az űrlap elküldve, különben választhat a felhasználó másik elemet .

Megjegyzés:

A selected elemváltozó funkcióját tekintve nem különbözik a selectedIndex -től, csak a listaelem címzése más.

MódosíthatóJavaScript 1.0Netscape2.0MS IE3.0 selectedIndex

Megadja, hogy az adott elem kiválasztott-e. Értéke true vagy false lehet.

Példa:

<html><head><title>teszt</title>
<script language="JavaScript">
function valasztas() {
 if(document.urlap.valaszt.selectedIndex == 3)
  document.urlap.valaszt.selectedIndex = 5;
}
document.write("Próbálja meg a Ágit kiválasztani, ");
document.write(" ..he...he.., Verát jobban szeretem !");
</script>
</head><body>
<form name="urlap">
<select name="valaszt" size=8 onChange="valasztas()">
 <option>Mária<option>Kati<option>Nóra<option>Ági
 <option>Edit<option>Vera<option>Juli<option>Ilona
</select>
</form>
</body></html>

Magyarázat:

A példában egy olyan űrlapot mutatunk be, melyen egy választólista látható. Ha a felhasználó megkisérli 3. sorszámú elemet kiválasztani, akkor a választás autómatikusan az 5. listaelemre ugrik. A változásfigyelést az onChange ceseménykezelő végzi..

Megjegyzés:

A selectedIndex elemváltozó funkcióját tekintve nem különbözik a selected -től, csak a listaelem címzése más.

MódosíthatóJavaScript 1.0Netscape2.0MS IE3.0 text

Megadja / beállítja a választólista adott elemének a szöveges tartalmát

Példa:

<html><head><title>teszt</title>
<script language="JavaScript">
function valt() {
 if(document.urlap.valaszt.selectedIndex == 3)
  document.urlap.valaszt.options[3].text = "Olga";
}
document.write("Ágit lecseréljük a csapatból !");
</script>
</head><body>
<form name="urlap">
<select name="valaszt" size=8 onChange="valt()">
 <option>Mária<option>Kati<option>Nóra<option>Ági
 <option>Edit<option>Vera<option>Juli<option>Ilona
</select>
</form>
</body></html>

Magyarázat:

A példában egy olyan űrlapot mutatunk be, melyen egy választólista látható. Ha a felhasználó kiválassza 3. sorszámú elemet, akkor annak új értéket adunk. A változásfigyelést az onChange eseménykezelő végzi.

Megjegyzés:

A text elemváltozó csak a JavaScript 1.1 -től módosítható : (Netscape 3.x, MS Internet Explorer 4.x), lekérdezése azonban már a JavaScript 1.0 -ben lehetséges volt.

Csak olvashatóJavaScript 1.0Netscape2.0MS IE3.0 value

Ez a tulajdonság határozza meg azt az értéket, melyet a háttérben hozzárendeltünk a választólista eleméhez.

Példa:

<html><head><title>teszt</title>
<script language="JavaScript">
function val_ell(){
 for(i=0;i<document.urlap.valaszt.length;++i)
  if(document.urlap.valaszt.options[i].selected == true)
   alert(document.urlap.valaszt.options[i].value);
}
</script>
</head><body>
<form name="urlap">
<select name="valaszt" size=5 onChange="val_ell()">
<option value="Kati, rossz válasz !">Vakválasz 1
<option value="Nóra, rossz válasz !">Vakválasz 2
<option value="Ildi, rossz válasz !">Vakválasz 3
<option value="Vera, rossz válasz !">Vakválasz 4
<option value="Mari, a jó válasz, ezaz!">Vakválasz 5
</select>
</form>
</body></html>

Magyarázat:

A példa egy űrlapot mutat egy választólistával. Mindegyik <option> tag-ben meg van adva egy value= belső elküldési érték. Ezenkívül a bevezető <select> tag-ben az eseménykezelő onChange= található, mely meghívja a val_ell() függvényt, melyben egy  for ciklus segítségével a kiválasztott elem rejtett elküldési értékét jelenítjük meg egy ablakban.
Start

Készült : 1999-10-27. Lengyel Sándor