<html>
<head>
<meta charset="utf-8">
</head>
<body>
<p>
<select id="selector"></select>
</p>
<p>
<input type="text" id="texto">
<input type="button" data-accion="add" value="Agregar">
<input data-accion="remove" type="button" value="Eliminar">
</p>
</body>
</html>
<script>
document.querySelectorAll("input[type=button]").forEach(el => el.addEventListener("click", boton));
const select=document.getElementById("selector");
const texto=document.getElementById("texto");
function boton(e) {
if (this.dataset.accion=="add") {
agregar();
} else if (this.dataset.accion=="remove") {
eliminar();
}
}
const agregar = () => {
if (texto.value.trim()=="") {
return false;
}
const option=document.createElement("option");
option.value=texto.value.trim();
option.text=texto.value.trim();
select.appendChild(option);
texto.value="";
return true;
}
const eliminar = () => {
const elemento=select.querySelector(`option[value='${texto.value.trim()}']`);
if (!elemento) {
return false;
}
elemento.remove();
texto.value="";
return true;
}
</script>
Comentarios sobre la versión: Versión 1 (0)
No hay comentarios