Html padajući izbornik

Dropdown lista ili padajući meni u html-u izgleda ovako:


<!DOCTYPE html>
<html>
<body>

<select name="auti" id="autiSelect">
  <option value="1">Mercedes</option>
  <option value="2">Audi</option>
  <option value="2" selected>Bmw</option>
</select>

</body>
</html>

Za generiranje liste koristimo tag select unutar kojega se nalazi popis (option) vrijednosti i opcija za izbor, u ovom slučaju value od 1 do 3, selected označava defaultno odabranu vrijednost (u ovom slučaju Bmw)

Ukoliko želimo da se popis generira automatski preko javascript-e iz nekog niza tada koristimo kolekciju Map const myMap = new Map koja sadrži ključ i vrijednost


<!DOCTYPE html>
<html>
<body>


<select name="auti" id="autiSelect">

</select>
 

<script>

var select = document.getElementById("autiSelect");

const myMap = new Map([
  ['Mercedes', 2],
  ['Audi', 3],
  ['Bmw', 3]
]);

for (let [k, v] of myMap){    
  var el = document.createElement("option");
    el.textContent = k;
    el.value = v;
    select.appendChild(el);
}

</script>

</body>
</html>

Kada želimo pročitati odabranu vrijednost value i tekstualnu vrijednost u javascript-u koristimo onchange koji poziva funkciju onchange="Odabir()" kao na primjeru:


<!DOCTYPE html>
<html>
<body>


<select name="auti" id="autiSelect" onchange="Odabir()">

</select>
 
<div id=d1></div>
<script>

var select = document.getElementById("autiSelect");


const myMap = new Map([
  ['Mercedes', 2],
  ['Audi', 3],
  ['Bmw', 3]
]);

for (let [k, v] of myMap){    
  var el = document.createElement("option");
    el.textContent = k;
    el.value = v;
    select.appendChild(el);
}

function Odabir() {
        
  var x = document.getElementById("autiSelect");
  var v = x.value; // value
  var txt = x.options[x.selectedIndex].text; // tekst koji se prikazuje na izborniku

  document.getElementById("d1").innerHTML = "Odabrali ste: " + txt + " value: " + v;
  
}

 </script>

</body>
</html>