Select element

Ett <select> element används för att skapa en “rullgardingsmeny”. Varje val i elementet är ett <option> element. Det är dess värde som används när man valt det. Man använder ofta ett select element i formulär som skickas till en server.

HTML elementet <select>

<select id="fruits">
  <option disabled selected>Välj i listan</option>
  <option value="apple">Äpple</option>
  <option value="banana">Banan</option>
  <option value="orange">Apelsin</option>
</select>

<select> = själva dropdown-menyn.
<option> = varje alternativ i listan.
disabled = man kan inte välja detta värde.
selected = detta värde är förvalt.
value = det värde som skickas om man skickar formuläret (eller hämtar med JavaScript).

Texten mellan <option> … </option> är det som syns för användaren.

Nå elementet med JavaScript

När vi har valt en frut ovan kommer det värdet (value) hamna i select elementets value. Vi kikar på hur det kan se ut i JavaScript:

let fruitElement = document.getElementById("fruits") // Kommer innehålla select elementet.
let chosenFruit = fruitElement.value // hämta det valda värdet.

console.log(chosenFruit) // Skriver ut den valda frukten, tex "orange".

I det här läget kommer vi hämta värdet som är satt direkt och skriva ut. Det kommer inte hända något när vi väljer ett annat så vi behöver jobba lite mer med det. Vi kan börja med att se hur vi lägger till data.

Lägg till <option> från JavaScript

Låt säga att vi vill dynamiskt fylla på vårt select element med fler valmöjligheter. Vi kan då göra det via JavaScript på fler sätt, till exempel med createElement och appendChild:

let fruitElement = document.getElementById("fruits")
let newFruit = document.createElement("option")

newFruit.value = "pear"
newFruit.text = "Päron"

fruitElement.appendChild(newFruit) // Vi lägger till ett päron till listan.

Det finns som sagt fler sätt att lägga till elementen för den som vill leta runt lite.

Trigga en funktion när man klickar på ett alternativ

För att det ska hända något när vi klickar på ett alternativ behöver vi en eventlyssnare. I detta fallet heter den change som vi använder med en addEventListener och vi når värdet via event.target.value.

function printChosenFruit(event) {
  const theFruit = event.target.value

  console.log(theFruit) // Skriver ut den valda frukten.
}

fruitElement.addEventListener("change", printChosenFruit)