0

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

5
  • Fijate si podes subir algo del código. Commented el 2 may. 2022 a las 14:50
  • Hola! Bienvenidx a SOes. Las preguntas del tipo "Tengo que hacer esto" sin mostrar el código que has escrito no suelen ser bien recibidas, ya que la respuesta será siempre adivinando y no encaja en el formato del sitio. Recomiendo que hagas el recorrido para entender el sitio y de paso ganar tu primera medalla. También estaría bien que revisaras Cómo preguntar para que recibas respuesta cuanto antes.
    – Alfabravo
    Commented el 2 may. 2022 a las 14:52
  • Recuerda que puedes editar tu pregunta cuantas veces sea necesario (incluso si termina cerrada) y añadir la info relevante a forma de Ejemplo mínimo (en los comentarios no se ve bien el código y abajo sólo van nuestros intentos de respuesta).
    – Alfabravo
    Commented el 2 may. 2022 a las 14:52
  • @CristianBudzicz ahí subi parte del código! Commented el 2 may. 2022 a las 15:00
  • Por favor, edita la pregunta para limitarla a un problema específico con suficiente detalle para identificar una respuesta adecuada.
    – Comunidad Bot
    Commented el 5 may. 2022 a las 12:40

1 respuesta 1

0

Te paso este ejemplo que te puede ser util

<form action="#" method="post">
<select name="departure" size="1">
    <option value="1">NY</option>
    <option value="2">FL</option>
    <option value="3">LA</option>
</select>
<select name="arrival" size="1">
    <option value="1">NY</option>
    <option value="2">FL</option>
    <option value="3">LA</option>
</select>

Fijate que en el select se le asigna un name que cuando creas dinamicament y con ese name se hara lo siguiente:

function deDupe(el) {
var opt = el.selectedIndex,
    other = el.name == 'departure' ?  document.getElementsByName('arrival')[0] : document.getElementsByName('departure')[0],
// lees la opcion seleccionada
    options = other.getElementsByTagName('option');

// recorres y deshabilitas/tmb podes borrar o lo que necesites
for (var i = 0, len = options.length; i < len; i++) {
    options[i].disabled = i == opt ? true : false;
  }
 }


var departure = document.getElementsByName('departure')[0],
arrival = document.getElementsByName('arrival')[0];

 deDupe(document.getElementsByName('departure')[0]);

 // cada vez que cambia el option seleccionado llamas a la funcion
 departure.onchange = function () {
  deDupe(departure);
};
 arrival.onchange = function () {
  deDupe(arrival); 
};

https://jsfiddle.net/davidThomas/qE4fN/

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.