Introducere în Web Development

Elementul <select> ne permite să afișăm un dropdown cu o listă de opțiuni. Vizual putem controla cum arată elementul în sine, dar nu prea avem pentru opțiuni. De aceea există librării de JavaScript și CSS care pot înlocui un select normal cu unul mai drăguț.

                    <select>
  <option value="with-value">
    Label 1
  </option>
  <option>
    Label
  </option>
</select>
                

Elementul select reprezintă un dropdown din care putem selecta o opțiune.

La alegerea unei opțiuni, valoarea acesteia se asociază elementului select.
Dacă nu se dă un atribut value unei opțiuni, textul dintre taguri va fi folosit ca valoare.

În mod normal, prima opțiune este selectată imediat, dar putem cere să se selecteze oricare alta, dându-i opțiunii atributul selected, fără valoare:

                    <select>
  <option>yes</option>
  <option selected>no</option>
</select>
                

Optgroup

Opțiunile pot fi grupate punându-le într-un element <optgroup>, căruia îi dăm și un atribut label cu un text ce va fi afișat înaintea fiecărui grup.

                    <select>
  <optgroup label="Group 1">
    <option>
      Option 1.1
    </option>
  </optgroup>
  <optgroup label="Group 2">
    <option>
      Option 2.1
    </option>
    <option>
      Option 2.2
    </option>
  </optgroup>
</select>