<!DOCTYPE html>
<html>
<head>
<title>Docuement</title>
<meta charset="UTF-8" />
</head>
<body>
<div id="container">
<!--
Aquí se agregan algunos de los departamentos y
localidades correspondientes de Uruguay
-->
</div>
<script>
document.addEventListener("DOMContentLoaded", () => {
const dptosLocs = {
"Artigas":["Artigas","Bella Unión"],
"Canelones":["Canelones","Santa Lucía"],
"Montevideo":["Montevideo"],
"Salto":["Salto","Daymán","Arapey"]
};
const select = document.createElement("SELECT");
Object.keys(dptosLocs).forEach(key => {
const optionGroup = document.createElement("OPTGROUP");
optionGroup.setAttribute("label", key);
dptosLocs[key].forEach(e => {
const option = document.createElement("OPTION");
option.textContent = e;
optionGroup.appendChild(option);
});
select.appendChild(optionGroup);
});
document.getElementById("container").appendChild(select);
})
</script>
</body>
</html>