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>