Ayuda para formulario con selects dinamicos..

[Heiroon]

Buenas colegas... a ver si me pueden ayudar con esto... estoy haciendo un formulario y necesito que al hacer click en un boton, se generen varios selects...
estoy intentando con la funcion document.createElement() he logrado generar los selects pero me salen vacios...

cabe destacar que tengo que llenarlos con data de la bd...

alguna idea?? de antemano gracias!

[Heiroon]

gente, ya he logrado generar selects con sus opciones y sus grupos desde base de datos... lo que para mi es bastante! ahora... lo que me falta es meter cada opcion en su respectivo grupo... Auxilio! aca les dejo el codigo tal cual va hasta ahora:

Código Javascript:

function newProd(){
 
    var container = document.getElementById('funebre');
    var cont = (++numero);
    
      var nDiv = document.createElement('div');
          nDiv.className = 'contentProducto';
          nDiv.id = 'Campo' + cont;
      var nCampo = document.createElement('input');
          nCampo.name = 'campos[]';
          nCampo.type = 'text';
          nCampo.className = "amount";
          nCampo.id = 'cantidad'+cont;
      var a = document.createElement('a');
          a.name = nDiv.id;
          a.href = '#';
          a.className = 'eraser';
          a.onclick = elimCamp;
          a.innerHTML = 'Eliminar';
          
      var prod = document.createElement('select');
          prod.name = 'prod[]';
          prod.id = 'prod' + cont;
          prod.className = "prodSelector";
        
      <? $tesla = 1;
         $nombrar = mysql_query("SELECT * FROM categorias WHERE status_categoria = '0'")or die(mysql_error());
         while($etiquetas = mysql_fetch_row($nombrar)){ ?>
      var grupo<?=$tesla?>= document.createElement('optgroup');
          grupo<?=$tesla?>.label="<?=utf8_encode($etiquetas[1])?>";
      
            prod.appendChild(grupo<?=$tesla?>); 
     <? $tesla++;  } ?>   
          
      var opt = document.createElement('option');
          opt.value=0;
          opt.innerHTML="Seleccione...";
         
          prod.appendChild(opt<?=$enum?>);
          
          
    <?  $enum = 1;
        $sql = "SELECT id_producto, productos.id_categoria, titulo_prod, categorias.id_categoria FROM productos INNER JOIN categorias ON productos.id_categoria = categorias.id_categoria WHERE status_prod = '0'";
        $peste = mysql_query($sql);
        $total = mysql_num_rows($peste);
        while($noire = mysql_fetch_row($peste)){ ?>
        
      var opt<?=$enum?> = document.createElement('option');
          opt<?=$enum?>.value="<?=$noire[0]?>";
          opt<?=$enum?>.innerHTML="<?=$noire[2]?>";
          alert("<?=$noire[3]?>,<?=$noire[1]?>");
          <? if($noire[3]==$noire[1]){?>
          prod.appendChild(opt<?=$enum?>);
          
    <?  } $enum++;  } ?>    
          
          
          nDiv.appendChild(prod);
          nDiv.appendChild(nCampo);
          nDiv.appendChild(a);
          container.appendChild(nDiv);
}
 

este es el html que se necesita para que trabaje:

Código HTML:

<div id="funebre">
                   
                        <div class="contentProducto" id="Campo1">
                            <select name="prod[]" id="prod1" class="prodSelector">
                                <option value="0">Seleccione...</option>
                                
                        <?  $sql = "SELECT * FROM productos WHERE status_prod='0'";
                            $peste = mysql_query($sql);
                            while($noire = mysql_fetch_row($peste)){ ?>
                                <option value="<?=$noire[0]?>"><?=$noire[2]?></option>
                            <? } ?>
                            </select><input type="text" name="campos[]" onkeydown="numbers(this)" onkeyup="numbers(this)" class="amount" id="cantidad1">
                        </div>
                    
                    </div>
 

[Heiroon]

solucionado! esta es la funcion por si alguien la necesita alguna vez...

Código Javascript:

function Objeto(cod,tex,grupo){
    this.cod=cod;
    this.tex=tex;
    this.grupo=grupo;
}
 
function newProd(){
 
 
    var container = document.getElementById('funebre');
    var cont = (++numero);
    
      var nDiv = document.createElement('div');
          nDiv.className = 'contentProducto';
          nDiv.id = 'Campo' + cont;
      var nCampo = document.createElement('input');
          nCampo.name = 'campos[]';
          nCampo.type = 'text';
          nCampo.className = "amount";
          nCampo.id = 'cantidad'+cont;
      var a = document.createElement('a');
          a.name = nDiv.id;
          a.href = '#';
          a.className = 'eraser';
          a.onclick = elimCamp;
          a.innerHTML = 'Eliminar';
          
      var prod = document.createElement('select');
          prod.name = 'prod[]';
          prod.id = 'prod' + cont;
          prod.className = "prodSelector";
        
      var opt = document.createElement('option');
          opt.value=0;
          opt.innerHTML="Seleccione...";
          opt.selected = true;
          prod.appendChild(opt);
            
var array_options;  
var grupo_anterior="";
var grupo;
var opcion;
      
      //var selector = document.getElementById('prod2');
      //alert(selector);
 
  var array_options = new Array();
  <? $n=1;
     $sql = "SELECT id_producto, productos.id_categoria, titulo_prod, categorias.id_categoria, categorias.nombre_categoria FROM productos INNER JOIN categorias ON productos.id_categoria = categorias.id_categoria WHERE status_prod = '0'";
     $con = mysql_query($sql)or die(mysql_error());
     while($repeat = mysql_fetch_array($con)){ 
     extract($repeat); ?>
  array_options["<?=$n?>"] = new Objeto("<?=$n?>","<?=utf8_encode($titulo_prod)?>","<?=utf8_encode($nombre_categoria)?>");
  <? $n++; } ?>
 
  var grupo_anterior="";
  var grupo;
  var opcion;
 
  for (var j in array_options){ 
  
  if(grupo_anterior!=array_options[j].grupo){  
            grupo          = document.createElement('OPTGROUP');
            grupo.label    = array_options[j].grupo;
                  grupo_anterior = array_options[j].grupo;
                        prod.appendChild(grupo);
                            }
                                opcion = document.createElement("OPTION");
                                    opcion.setAttribute("value",array_options[j].cod);
                                        opcion.innerHTML = array_options[j].tex;
                                            prod.appendChild(opcion);
                                              }
          
          
          nDiv.appendChild(prod);
          nDiv.appendChild(nCampo);
          nDiv.appendChild(a);
          container.appendChild(nDiv);
}