Listas desplegables llenadas manualmente con JavaScript y DOM
Hola a todos, hoy veremos un ejemplo simple de llenar una lista desplegable (etiqueta select en html) en forma manual por medio de tres formas, dos con JavaScript (JS) y una con DOM, no usaremos base de datos.
Esto nos servirá como referencia o modelo y poder tomarlo cuando deseemos para cuando creemos formularios para ingresos de datos.
lista_simple.html
<body> <form name="f1" action="#" method="get"> <select name="sDep" id="sDep" size="7"></select><br /> <input type="text" id="tVal" name="tVal" /><br /> <input type="button" value="Agregar con JS" onclick="agrega_js()" /> <input type="button" value="Agregar con DOM" onclick="agrega_dom()" /> </form> </body>
Tenemos un etiqueta select vacía con tamaño de 7 para observar mejor este ejemplo cuando agreguemos los elementos manualmente.
También tres botones, cada uno agregará elementos de las dos formas indicadas.
El código JS es:
<head>
<title>Listas desplegables llenadas manualmente</title>
<script language="JavaScript" type="text/javascript">
function agrega_js() {
var numele=document.f1.sDep.length;
document.f1.sDep.length=numele+1;
document.f1.sDep.options[numele].text=document.f1.tVal.value;
document.f1.sDep.options[numele].value=document.f1.tVal.value;
alert("Se agrego "+document.f1.tVal.value+" con JS");
document.f1.tVal.value="";
document.f1.tVal.focus();
}
function agrega_js1() {
var numele=document.f1.sDep.length;
var texto = document.f1.tVal.value;
document.f1.sDep.options[numele]=new Option(texto,texto,"defaultSelected");
alert("Se agrego "+document.f1.tVal.value+" con JS1");
document.f1.tVal.value="";
document.f1.tVal.focus();
}
function agrega_dom() {
obTex = document.getElementById("tVal");
var obOpt=document.createElement('option');
obOpt.text=obTex.value; obOpt.value=obTex.value;
obSel = document.getElementById("sDep");
try {
obSel.add(obOpt,null); // para el resto de navegadores
}
catch(ex) {
obSel.add(obOpt); // sólo para IE
}
alert("Se agrego "+obTex.value+" con DOM");
obTex.value="";
obTex.focus();
}
</script>
</head>
Esta probado en los principales navegadores, eso es todo, hasta pronto…
@Danilo Thanks for your comments, this is what they learned back in all this time
It is nearly impossible to find blogs that contain such consistently readable and informative content
as is on offer on yours, you have earned the miniscule amount of
time it has taken to write my appreciation at your endeavours.
Thank you.