Select no se carga correctamente en tabla html

[EmilianoEmiliano]

Hola, como están me podrían brindarme sus consejos con lo siguiente.

Tengo una tabla htm la cual se llena al pulsar un botón agregar nueva fila, todo correcto:

Código Javascript:

var id_elementos=1,id_selec=0,suma=0,re=0;
 
            function fn_agregar(){
 
             if(document.getElementById("nombre").value!="" || document.getElementById("precio").value!="" || document.getElementById("cantidad").value!=""  ){
 
              if(repetido!=1){
 
                var nombre=document.forms["frm_venta"].nombre.value;
                var precio=document.forms["frm_venta"].precio.value;
                var cantidad=document.forms["frm_venta"].cantidad.value;
                var preciot=parseFloat(1*precio).toFixed(2);
 
                cadena = "<tr>";
 
cadena=cadena + "<td width='20px;'>" + "<select id='select_venta["+id_elementos+"]' name='select_venta["+id_elementos+"]' class='txtcantidad_tabla_venta' onchange='pasar_valor(this.value)'>"+"<option selected value='1'>1</option>"+"<select/>"+"</td>";
 
cadena=cadena + "<td width='20px;'>" + "<input type='text' id='cantida_venta["+id_elementos+"]' name='cantida_venta["+id_elementos+"]' class='txtcantidad_tabla_venta' value='"+1+"'/>" +"</td>";
 
                $("#tablas_venta tbody").append(cadena);
 
/////////////////////Aquì cargo el selec creado teriormente/////////////////////////////////////
 
        selector = document.getElementById("select_venta["+id_elementos+"]");
                var li=document.forms["frm_venta"].cantidad.value;
                 for ( i = 1; i <= cantidad ; i++)
                 {
 
                  selector.options[i] = new Option(i,i);
 
                 }
 
////////////////////////////////////////////////////////////////////////////////////
 
              }else{
                  document.getElementById('div_btn_agregar').style.display='none';
                  alert("AVISO!! El producto ya esta en la lista de ventas");
 
              }
            }else{
             alert("Antes de agregar debe buscar un producto disponible en el stock");
             document.getElementById('div_btn_agregar').style.display='none';
                 }
 
            }
 

El problema se genera que desde el tercer select no se carga la lista esta vacía:

Código Javascript:

selector = document.getElementById("select_venta["+id_elementos+"]");
                var li=document.forms["frm_venta"].cantidad.value;
                 for ( i = 1; i <= cantidad ; i++)
                 {
 
                  selector.options[i] = new Option(i,i);
 
                 }
 

El select se llena con una lista que su limite lo toma ingresado en un input, y normal. Pero no se porque no se carga normalmente...


Les agradezco sus sugerencias, pues he probado de distintas formas y no se que esta pasando, por que no me lanza ningún error....