A select tag

A select tag legördülő listát hoz létre HTML űrlapokban való használatra.

Az egyes lista elemeket a option tagben kell elhelyezni.

Attribútumok

Attribútum Leírás
multiple Ennek az attribútumnak a jelenléte többszörös kiválasztást (multiselect) hoz létre - olyan legördülő listát, ahol több elemet is kijelölhetünk a Ctrl billentyű lenyomásával tartva, vagy az egérrel kijelölve őket.
Opcionális attribútum.
name A legördülő lista neve. Azért szükséges, hogy a beviteli mező adatait PHP-ban el tudjuk érni. Az űrlap megfelelő működéséhez a beviteli mezők nevei ne essenek egybe egymással (egy űrlapon belül). Ha megegyeznek, akkor a PHP-ban annak a beviteli mezőnek az adatai érkeznek meg, amelyik alacsonyabb volt a HTML kódban.

Példa

Nézzük meg, hogyan működik a legördülő lista:

html<select>
  <option>City1</option>
  <option>City2</option>
  <option>City3</option>
  <option>City4</option>
</select>

Результат:

Példa

Állítsuk be a legördülő lista szélességét a legnagyobb elem szélességére (ha az nincs explicit megadva a width CSS tulajdonsággal):

html<select>
  <option>Big City1</option>
  <option>City2</option>
  <option>City3</option>
  <option>City4</option>
</select>

Результат:

Példa . Alapértelmezett kiválasztás

Most pedig próbáljunk meg alapértelmezett várost kiválasztani. Ezt a selected attribútum segítségével tehetjük meg:

html<select>
  <option>Big City1</option>
  <option selected>City2</option>
  <option>City3</option>
  <option>City4</option>
</select>

Результат:

Példa . Többszörös kiválasztás

Most alakítsuk át a normális selectet többszörös kiválasztássá a multiple attribútum segítségével:

html<select multiple name="city[]">
  <option>City1</option>
  <option>City2</option>
  <option>City3</option>
  <option>City4</option>
</select>

Результат:

Figyeljük meg, hogy a select nevének, amit a name attribútumban adtunk meg, szögletes zárójelekkel kell végződnie. Ez azért szükséges, hogy a PHP-ban minden kiválasztott érték megérkezzen (különben csak egy - az utolsó - érkezik meg).

Példa . Több alapértelmezett érték a többszörös kiválasztásban

Most pedig a többszörös kiválasztásban próbáljunk meg alapértelmezetten több értéket is kijelölni:

html<select multiple name="city[]">
  <option>City1</option>
  <option selected>City2</option>
  <option>City3</option>
  <option selected>City4</option>
</select>

Результат:

Lásd még

  • a selected attribútum,
    amely alapértelmezetten kiválasztott listaelemet határoz meg
  • a optgroup tag,
    amely listaelemeket csoportosít
  • a datalist tag,
    amely legördülő listát hoz létre