Skip to main content
se añadieron 3520 caracteres en el cuerpo
Origen Enlace
function add(){
    var t1=document.getElementById("table");
    var tbody=document.getElementById("tbd");
    
    var row1 = document.createElement("tr");
    //row1.height = 110;
    for(var i=0;i<1;i++){
    var col1=document.createElement("td");
    col1.classList.add('col-3');
    col1.innerHTML = "<select name='talle[]' required id='talle' class='talle tall form-control'><optgroup label='Talle'></optgroup></select> ";

    var col2=document.createElement("td");    
    col2.classList.add('col-3');
    col2.innerHTML = "<input type='number' min='0' placeholder='Indicar' required class='cantidad form-control' name='cantidad[]' id='cantidad'>";

    var col3=document.createElement("td");
    col3.classList.add('col-3');
    col3.innerHTML = "<button class='eliminarfila btn btn-danger' type='button' ><i class='fas fa-times'></i></button>";    

    
    row1.appendChild(col1);
    row1.appendChild(col2);
    row1.appendChild(col3);
    
    }
    
    tbody.appendChild(row1);
    t1.appendChild(tbody);
}
<table style="width: 100%;" id="table" class="table table-hover table-striped table-bordered">
                <thead>
                    <tr>
                        {{-- <th></th> --}}
                        <th>Talle</th>
                        <th>Cantidad</th>
                        <th>Quitar</th> 
                    </tr>
                </thead>

                <tbody id="tbd">
                </tbody>
            </table>
            
            <script>
                                                        
    $('#agregartalle').on('click', function () {            
        var idprod = '<?php echo $producto->id; ?>'
        var tipotalle = '<?php echo $producto->tipo_talle; ?>';
                    
        $(".talle").html('');                
        $.ajax({
           
            url: "{{url('admin/api/fetch-talle')}}",
            type: "POST",
            data: {
                id_prod: idprod,
                tipo: tipotalle,
                _token: '{{csrf_token()}}'
            },
            dataType: 'json',
            success: function (result) {
                $('.talle').html('<option disabled selected value="">Seleccionar talle</option>');                                                                                                              
                $.each(result.talles, function (key, value) {    
                                             
                    $(".talle").append('<option value="' + value.id + '">' + value.medida + '</option>');                         
                });
  
                
                $('.talle').removeClass("talle");               
            }                  
        });                
    });                  
</script>

Tengo un formulario el cuál se agregan todos los 'select' que desee el usuario, éstos 'select' tienen las mismas 'option' (recolectados por un fetch en un controlador de laravel). Necesito que si un 'select' tiene una 'option' seleccionada, esa 'option' quede deshabilitada para los próximos 'select'. Ahi subi parte del código, la url admin/api/fetch-talle lo que hace es recolectar todos los talles que no han sido seleccionados en la base de datos para ese producto. Luego el js aparte lo que hace es agregar la fila con el select.Eleccion  de talles

Tengo un formulario el cuál se agregan todos los 'select' que desee el usuario, éstos 'select' tienen las mismas 'option' (recolectados por un fetch en un controlador de laravel). Necesito que si un 'select' tiene una 'option' seleccionada, esa 'option' quede deshabilitada para los próximos 'select'.Eleccion  de talles

function add(){
    var t1=document.getElementById("table");
    var tbody=document.getElementById("tbd");
    
    var row1 = document.createElement("tr");
    //row1.height = 110;
    for(var i=0;i<1;i++){
    var col1=document.createElement("td");
    col1.classList.add('col-3');
    col1.innerHTML = "<select name='talle[]' required id='talle' class='talle tall form-control'><optgroup label='Talle'></optgroup></select> ";

    var col2=document.createElement("td");    
    col2.classList.add('col-3');
    col2.innerHTML = "<input type='number' min='0' placeholder='Indicar' required class='cantidad form-control' name='cantidad[]' id='cantidad'>";

    var col3=document.createElement("td");
    col3.classList.add('col-3');
    col3.innerHTML = "<button class='eliminarfila btn btn-danger' type='button' ><i class='fas fa-times'></i></button>";    

    
    row1.appendChild(col1);
    row1.appendChild(col2);
    row1.appendChild(col3);
    
    }
    
    tbody.appendChild(row1);
    t1.appendChild(tbody);
}
<table style="width: 100%;" id="table" class="table table-hover table-striped table-bordered">
                <thead>
                    <tr>
                        {{-- <th></th> --}}
                        <th>Talle</th>
                        <th>Cantidad</th>
                        <th>Quitar</th> 
                    </tr>
                </thead>

                <tbody id="tbd">
                </tbody>
            </table>
            
            <script>
                                                        
    $('#agregartalle').on('click', function () {            
        var idprod = '<?php echo $producto->id; ?>'
        var tipotalle = '<?php echo $producto->tipo_talle; ?>';
                    
        $(".talle").html('');                
        $.ajax({
           
            url: "{{url('admin/api/fetch-talle')}}",
            type: "POST",
            data: {
                id_prod: idprod,
                tipo: tipotalle,
                _token: '{{csrf_token()}}'
            },
            dataType: 'json',
            success: function (result) {
                $('.talle').html('<option disabled selected value="">Seleccionar talle</option>');                                                                                                              
                $.each(result.talles, function (key, value) {    
                                             
                    $(".talle").append('<option value="' + value.id + '">' + value.medida + '</option>');                         
                });
  
                
                $('.talle').removeClass("talle");               
            }                  
        });                
    });                  
</script>

Tengo un formulario el cuál se agregan todos los 'select' que desee el usuario, éstos 'select' tienen las mismas 'option' (recolectados por un fetch en un controlador de laravel). Necesito que si un 'select' tiene una 'option' seleccionada, esa 'option' quede deshabilitada para los próximos 'select'. Ahi subi parte del código, la url admin/api/fetch-talle lo que hace es recolectar todos los talles que no han sido seleccionados en la base de datos para ese producto. Luego el js aparte lo que hace es agregar la fila con el select.Eleccion  de talles

Origen Enlace

Deshabilitar opción de select dinámico

Tengo un formulario el cuál se agregan todos los 'select' que desee el usuario, éstos 'select' tienen las mismas 'option' (recolectados por un fetch en un controlador de laravel). Necesito que si un 'select' tiene una 'option' seleccionada, esa 'option' quede deshabilitada para los próximos 'select'.Eleccion  de talles