Cargar select en tabla html

[EmilianoEmiliano]

Hola como están, tendrían la amabilidad de guiarme con lo siguiente:

Mediante un botón agrego nuevas filas a una tabla html con sus respectivos campos, incluido un select:

Código Javascript:

var id_elementos=1,id_selec=0,suma=0, longitud=0,re=0;
            function fn_agregar(){
 
 if(document.getElementById("nombre").value!="" || document.getElementById("precio").value!="" || document.getElementById("cantidad").value!=""  ){
 
                fn_comprobar_duplicados();
                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>";   
            
cadena=cadena + "<td>" + "<input type='text' id='detalle_venta["+id_elementos+"]' name='detalle_venta["+id_elementos+"]' class='txtdescipcion_tabla_venta' value='"+nombre+"'/>" +"</td>";
 
cadena=cadena + "<td width='80px;'>" + "<input type='text' id='preciou_venta["+id_elementos+"]' name='preciou_venta["+id_elementos+"]' class='txtpreciou_tabla_venta' value='"+precio+"' />" +"</td>";
 
cadena=cadena + "<td width='75px;'>" + "<input type='text' id='preciot_venta["+id_elementos+"]' name='preciot_venta["+id_elementos+"]' class='txtpreciot_tabla_venta' value='"+preciot+"' />" +"</td>";
                
cadena = cadena + "<td width='20px;'><a class='elimina' title='Eliminar de lista de ventas'><img src='../../././images/delete.png' /></a></td>";
 
 $("#tablas_venta tbody").append(cadena);
 
//////////Aquí agrego los datos del select añadido anteriormente////////////
 
var selector = document.getElementById("select_venta["+id_elementos+"]");           
                 for (var i = 1; i <= cantidad ; i++)
                 {
                  selector.options[i] = new Option(i,i);
                 }
    ///////////////////////////////////
         
 document.getElementById('div_btn_agregar').style.display='none';
                               fn_dar_eliminar();
                fn_cantidad();
                fn_sumar();
                id_elementos++; 
                                                    
            }else{
 
             alert("Antes de agregar debe buscar un producto disponible en el stock");
             document.getElementById('div_btn_agregar').style.display='none';   
                        
                 }
                 
            }
 

El problema es que el select debe cargar una lista de números dependiendo de:

Código Javascript:

var cantidad=document.forms["frm_venta"].cantidad.value;
 

,
los dos primeras columnas se agrega bien pero luego la tercera o las columnas que se agregue toma un valor vació, su valor pasa al select de la segunda columna, el código lo tengo de esta forma:

Código Javascript:

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

Les agradezco por los comentarios y sugerencias.