0

Tengo dos select los cuales actúan dinámicamente para elegir el tipo de documento de un ciudadano o compañía. En el primer select tengo los 3 tipos de documentos que existen en mi país y según el que elija el usuario el segundo select despliega los prefijos de abreviación en letras usados para esos tipos de documentos, ejemplo si elije C.I.= es la cédula o dni del ciudadano y existen dos letras para ese tipo de documento, en ese momento el select de abajo cambiara y mostrara estas letras V(venezolano)8 números, E(extranjero)8 números, Si elije R.I.F es una persona juridica, empresa ó gobierno por ejemplo un rif de empresa comienza con J(Juridico)9 números, G(Gobierno) 9 números Si elije pasaporte cambiara Pasaporte el select de abajo mostrara P(Pasaporte)10 números.

Según lo explicado acá arriba, lo que necesito en si es que según la opción que el usuario elija en los select quiero que el input cambie su maxlenght, si elije cédula que sería V o E quiero que el maxlenght del input se ponga en 8, si elije pasaporta P quiero que el maxlenght del input cambie a 10 etc..etc.

Aquí el fragmento de mi formulario donde pido el tipo del documento con los select y luego el input

</div>
                    <div class="form-group">
                    <label for="tipo">ELIGE TU TIPO DE DOCUMENTO</label>
                    <select name="tipo" class="form-control" onchange="cambia()">
                    <option value="1">C.I.
                    <option value="2">R.I.F
                    <option value="3">Pasaporte
                    </select>
                     </div>
                    <div class="form-group">
                    <select name="letras" class="form-control">
                    <option value="V">V
                    <option value="E">E
                    </select>
                </div>
                    <div class="form-group">
                    <label for="documento">Docuemento</label>
                    <input type="text" name="documento" placeholder="escribe el número de cédula, rif ó pasaporte según sea el caso" id="documento" class="form-control" required>
                </div>

Aquí la función que genera el dinamismo entre los select

<script type="text/javascript">
        var letras_1 = new Array ("V", "E");
        var letras_2 = new Array ("V", "E", "J", "P", "G");
        var letras_3 = new Array ("P");
  
        
        function cambia(){
            var tipo;
         
            tipo= document.registropago.tipo[document.registropago.tipo.selectedIndex].value;
  
            if(tipo!=0){
                mis_letras=eval("letras_" + tipo);
                num_letras=mis_letras.length;  
                document.registropago.letras.length = num_letras;
           
                for(i=0; i<num_letras; i++){
                    document.registropago.letras.options[i].value=mis_letras[i];
                    document.registropago.letras.options[i].text=mis_letras[i];
                }
                }else{
                    document.registropago.letras.length = 1;
                    document.registropago.letras.options[0].value="-";
                    document.registropago.letras.options[0].text="-";
                }
                document.registropago.letras.options[0].selected = true;
                
            }
        </script>

Gracias de antemano.

1 respuesta 1

1

La opción más eficaz que se me ocurre es la siguiente:

La primera es que cuando creas los option de tu select que, me imagino que tienen un dato relacionado sobre la cantidad de caracteres permitidos con los que puede contar. De esta manera puedes contar valores de tipo data para cada option. De esta manera:

<option value!="{{ $doc->id }}" data-lenght!="{{ $doc->lenght }}"> C.I.

Y de esta manera, en tu JS, puedes tener algo como lo siguiente:

$(document).ready(function () {

$('select[name="tipo"]').on('change', function() { // Se activa en el cambio del primer select
    var tipo = $(this).val();
    var selected_lenght = $('select[name="tipo"] option:selected').data('lenght');
    var letras = $('select[name="letras"]');
        
    switch(tipo) { // Suponiendo que el valor de los option empieza con 1 y son consecutivos
        case "1": 
            // Aquí, para este caso, independientemente del segundo select, la longitud del otro campo va tener un valor, así que le asignamos el data del primer select (Siempre 8)
            $('input[name="documento"]').val('');
            $('input[name="documento"]').attr('maxlength', selected_lenght);
                        
            // Ahora ponemos los nuevos option del segundo select
            letras.empty(); // Vaciamos sus option y agregamos nuevas
            letras.append('<option value="V">V </option>');
            letras.append('<option value="E">E </option>');

            break;
        case "2": 
            // Aquí, aplica igual que el anterior (Siempre 9)
            $('input[name="documento"]').val('');
            $('input[name="documento"]').attr('maxlength', selected_lenght);

            // Ahora ponemos los nuevos option del segundo select
            letras.empty(); // Vaciamos sus option y agregamos nuevas
            letras.append('<option value="J"> Jurídico </option>');
            letras.append('<option value="G"> Gobierno </option>');

            break;
        case "3":
            // Aquí, aplica igual (Siempre 10)
            $('input[name="documento"]').val('');
            $('input[name="documento"]').attr('maxlength', selected_lenght);

            // Ahora ponemos los nuevos option del segundo select
            letras.empty(); // Vaciamos sus option y agregamos nuevas
            letras.append('<option value="P" selected> Pasaporte </option>'); // Le ponemos selected ya que será la única opción a elegir, no hay de otra

            break;
        default:
            // En caso de algún nuevo tipo de documento y no esté validado aquí
    }
        
});

});

Y listo.

Te dejo el ejemplo funcionando aquí

19
  • Gracias por responder, no soy muy experimentado en javascript apenas estoy aprendiendo, la primera interrogante del código que me colocas es ¿dónde asigno el valor del máximo de caracteres? y segundo, cuando pego la función dentro de mi script los select dejan de hacer el dinamismo.
    – Apalazon
    Commented el 27 oct. 2020 a las 2:45
  • El valor del número de caracteres para cada opción, se puede asignar en un columna de tu base datos o, si solamente tienes esas opciones "hardcodeadas" puedes poner el valor directamente como data-lenght="16". En el caso del dinamismo que mencionas, no había notado ese otro select, qué función que afecta el input?
    – Chris
    Commented el 27 oct. 2020 a las 2:51
  • Si, yo le asigno el valor directamente en la bd pero el más largo que en este caso es el pasarporte, porque en la bd existe un solo campo que es documento allí se guarda cualquiera de las opciones por eso necesito que se valide directamente en el input. Con respecto al dinamismo cuando pego esto $('select').on('change', function() { $('input[name="documento"]').attr('maxlength', $(this).data('lenght')); });
    – Apalazon
    Commented el 27 oct. 2020 a las 3:03
  • dentro de mis script los select ya no cambian
    – Apalazon
    Commented el 27 oct. 2020 a las 3:04
  • Eso dos select son dinámicos ségun lo que elijas en el primero el segundo cambia
    – Apalazon
    Commented el 27 oct. 2020 a las 3:10

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.