<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>
Crear cuenta
Comentarios sobre la versión: Versión 1 (0)
No hay comentarios