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…