⌘K

Element select

Element select vytvára rozbaľovací zoznam pre použitie v HTML formulároch.

Samostatná položka zoznamu musí byť uložená v elemente option.

Atribúty

Atribút Popis
multiple Prítomnosť tohto atribútu vytvára multiselect - rozbaľovací zoznam, v ktorom je možné vybrať viacero položiek podržaním klávesu Ctrl alebo ich označením myšou.
Nepovinný atribút.
name Názov rozbaľovacieho zoznamu. Potrebný na to, aby bolo možné získať údaje vstupného poľa v PHP. Pre korektnú funkciu formulára by sa názvy vstupných polí nemali navzájom opakovať (v jednom formulári). Ak sa zhodujú - v PHP prídu údaje toho vstupného poľa, ktoré je nižšie v HTML kóde.

Príklad

Pozrime sa, ako funguje rozbaľovací zoznam: 

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

Результат:

Príklad

Nastavme šírku rozbaľovacieho zoznamu tak, aby bola rovná šírke najväčšieho prvku (ak nie je explicitne uvedená pomocou CSS vlastnosti width): 

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

Результат:

Príklad . Predvoľba

A teraz skúsme nastaviť mesto ako predvolené. Urobíme to pomocou atribútu selected: 

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

Результат:

Príklad . Multiselect

Teraz premeňme obyčajný select na multiselect pomocou atribútu multiple: 

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

Результат:

Všimnite si, že názov selectu, zadaný v atribúte name, by mal byť s hranatými zátvorkami na konci. Je to potrebné preto, aby v PHP prišli všetky vybrané hodnoty (inak príde len jedna - posledná).

Príklad . Viacero predvolených hodnôt v multiselecte

A teraz, v multiselecte, skúsme vybrať viac ako jednu hodnotu ako predvolenú: 

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

Результат:

Pozri tiež

  • atribút selected,
    ktorý nastavuje predvolene vybranú položku zoznamu
  • element optgroup,
    ktorý grupuje položky zoznamu
  • element datalist,
    ktorý vytvára rozbaľovací zoznam
BackTextareaNextElement option