[SOLUCIONADO] Como crear un select con Javascript

jandrogdz · #1 (**permalink**) 19/03/2013, 10:11

Buenas foro

Estoy realizando un sistema de pedidos donde las cajas de texto se tienen que estar creando dinamicamente pero mi problema es que no se como crear el select con sus opciones correspondientes.

tengo esto que me crea varios elementos y un select pero no se como agregar las opciones:

Código Javascript:

Ver originalnum=0;
function crear(obj) {
  num++;
  fi = document.getElementById('fiel');
  contenedor = document.createElement('div');
  contenedor.id = 'div'+num;
  fi.appendChild(contenedor);
 
  ele = document.createElement('select');
  ele.name = 'unidad'+num;
  ele.options
  contenedor.appendChild(ele);
  
  ele = document.createElement('input');
  ele.type = 'text';
  ele.name = 'cantidad'+num;
  contenedor.appendChild(ele);
  
  ele = document.createElement('input');
  ele.type = 'text';
  ele.name = 'precio'+num;
  contenedor.appendChild(ele);
  
  ele = document.createElement('input');
  ele.type = 'button';
  ele.value = 'Borrar';
  ele.name = 'div'+num;
  ele.onclick = function () {borrar(this.name)}
  contenedor.appendChild(ele);
}
function borrar(obj) {
  fi = document.getElementById('fiel');
  fi.removeChild(document.getElementById(obj));
}

Espero me puedan apoyar. De antemano muchas gracias

PIRRUMAN · #2 (**permalink**) 19/03/2013, 10:34

Esto te puede servir

http://www.forosdelweb.com/f13/agreg...-318363-print/

emprear · #3 (**permalink**) 19/03/2013, 10:45

Agrego

Código HTML:

Ver original<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Crear Select</title> 
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
 
<script type="text/javascript">
//<![CDATA[
window.onload = function(){
var campo_dia=document.getElementById('dias');
for (var i=0; i < 31; i++){
campo_dia.options[i]=new Option(i+1, 'v_'+(i+1)); // texto-valor
}
}
 
//]]>
</script>
</head>
<body>
<form action="#">
<select name="dias" id="dias">
<option value=""><!-- fix w3c --></option>
</select>
</form>
</body>
</html>

Solo resta saber de dónde se obtienen los pares texto-valor, incluso podría ser el mismo para ambos

Saludos

jandrogdz · #4 (**permalink**) 19/03/2013, 10:51

Gracias por contestar

He tratado de acoplarlo a mi codigo pero sin exito esto es lo que hice.

Código Javascript:

Ver originalnum=0;
function crear(obj) {
  num++;
  fi = document.getElementById('fiel');
  contenedor = document.createElement('div');
  contenedor.id = 'div'+num;
  fi.appendChild(contenedor);
 
  ele = document.createElement('select');
  ele.name = 'unidad'+num;
  ele.options
  contenedor.appendChild(ele);
  
  var lista = "<select name='opcion'>"
  + "<option>G</option>"
  + "<option>P</option>"
  + "</select>";
  contenedor.appendChild(document.createElement(lista));
  
  ele = document.createElement('input');
  ele.type = 'text';
  ele.name = 'cantidad'+num;
  contenedor.appendChild(ele);
  
  ele = document.createElement('input');
  ele.type = 'text';
  ele.name = 'precio'+num;
  contenedor.appendChild(ele);
  
  ele = document.createElement('input');
  ele.type = 'button';
  ele.value = 'Borrar';
  ele.name = 'div'+num;
  ele.onclick = function () {borrar(this.name)}
  contenedor.appendChild(ele);
}
function borrar(obj) {
  fi = document.getElementById('fiel');
  fi.removeChild(document.getElementById(obj));
}

De esta forma solo crea el primer input pero ya no crea nada.

jandrogdz · #5 (**permalink**) 19/03/2013, 11:01

Ya lo soluciones muchas gracias a todos por sus respuestas el archivo que me proporcionaste PIRRUMAN tenia mi solucion gracias de verdad