0

esta es la primera inquietud que tengo en mi trayectoria como programador y en realidad, no entiendo que sucede. Bueno, el problema es el siguiente, se trata de un código para validar direcciones mediante un estandar especifico que requiero tanto mostrar el fragmento original como la abreviación, por lo cual, tengo varios tipos de etiquetas en un formulario (En este caso, solo estoy probando con inputs tipo text y selects) y como se sabe, el select tiene 2 tipos de datos de salida, el value (val) y el text para JQuery, realice un código de obtención de datos directamente desde una clase para ser capturados como un class array de tags; la primera parte sobre los value me funciona correctamente pero aquí el problema, cuando intento mostrar el texto de un select en especifico, me duplica la salida de este, es decir, como que recorre todos los selects que tengo en el formulario y cuando encuentra otro select toma de nuevo el valor del select seleccionado anteriormente, en otras palabras, a pesar de que el otro select no tenga valores, retoma de nuevo el valor del select seleccionado y no entiendo el porque.

Intente utilizar algo similar a

if($(this).is('select')){
     $(this + 'option:selected').text();
}

Pero no funcionaba, creo que estoy utilizando mal una sintaxis o que se yo, lo que me inquieta también es como verificar si un tag al que llamo es el tag que necesito para sacar su valor (En este caso, su texto seleccionado) pero no se si está bien.

Este es el código tanto HTML como en JavaScript, espero que me puedan ayudar

    function initEvents(){
        $('select').change(mostrarDatos);
        $('input').keyup(mostrarDatos);
    }
    initEvents();

    function mostrarDatos(){
        var valores = $('.datos').map(function(){
            return $(this).val();
        }).get().join(' ');
        $('#mostrarValores').val(valores);
        var texto = $('.datos').map(function() {
            if ($(this).is('select')) {
                return $('select option:selected').text();
            } else {
                return $(this).val();
            }
        }).get().join(' ');
        $('#mostrarTexto').val(texto);
    }
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <title>Document</title>
    </head>
    <body>
        <label for="lista1">Lista 1:</label>
        <select class="datos" name="lista1" id="lista1">
            <option value="" selected disabled></option>
            <option value="EJE1">Ejemplo 1</option>
            <option value="EJE2">Ejemplo 2</option>
            <option value="EJE3">Ejemplo 3</option>
        </select>
        <label for="texto1">Texto 1:</label>
        <input type="text" class="datos" id="texto1" name="texto1">
        <label for="lista2">Lista 2:</label>
        <select class="datos" name="lista2" id="lista2">
            <option value="" selected disabled></option>
            <option value="EJE1">Ejemplo 1</option>
            <option value="EJE2">Ejemplo 2</option>
            <option value="EJE3">Ejemplo 3</option>
        </select>
        <label for="texto2">Texto 2:</label>
        <input type="text" class="datos" id="texto2" name="texto2">
        <label for="texto3">Texto 3:</label>
        <input type="text" class="datos" id="texto3" name="texto3">
        <br><br><br><br>
        <label for="mostrarValores">Mostrar Valores</label>
        <input type="text" id="mostrarValores">
        <label for="mostrarTexto">Mostrar Texto</label>
        <input type="text" id="mostrarTexto">
        <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
        <script src="script.js" type="text/javascript"></script>
    </body>
    </html>

2 respuestas 2

0

Puedes utilizar la sintaxis $('option:selected',this).text(); para obtener el text del objeto this:

function initEvents(){
        $('select').change(mostrarDatos);
        $('input').keyup(mostrarDatos);
    }
    initEvents();

    var datos = "";
    function mostrarDatos(){
        var valores = $('.datos').map(function(){
            return $(this).val();
        }).get().join(' ');
        $('#mostrarValores').val(valores);
        var texto = $('.datos').map(function() {
            if ($(this).is('select')) {
                return $('option:selected',this).text();
            } else {
                return $(this).val();
            }
        }).get().join(' ');
        $('#mostrarTexto').val(texto);
    }
<!DOCTYPE html>
    <html lang="en">
    <head>
        <title>Document</title>
    </head>
    <body>
        <label for="lista">Lista 1:</label>
        <select class="datos" name="lista1" id="lista1">
            <option value="" selected disabled></option>
            <option value="EJE1">Ejemplo 1</option>
            <option value="EJE2">Ejemplo 2</option>
            <option value="EJE3">Ejemplo 3</option>
        </select>
        <label for="texto">Texto 1:</label>
        <input type="text" class="datos" id="texto1" name="texto1">
        <label for="lista">Lista 2:</label>
        <select class="datos" name="lista2" id="lista2">
            <option value="" selected disabled></option>
            <option value="EJE1">Ejemplo 1</option>
            <option value="EJE2">Ejemplo 2</option>
            <option value="EJE3">Ejemplo 3</option>
        </select>
        <label for="texto">Texto 2:</label>
        <input type="text" class="datos" id="texto2" name="texto2">
        <label for="texto">Texto 3:</label>
        <input type="text" class="datos" id="texto3" name="texto3">
        <br><br><br><br>
        <label for="mostrarValores">Mostrar Valores</label>
        <input type="text" id="mostrarValores">
        <label for="mostrarTexto">Mostrar Texto</label>
        <input type="text" id="mostrarTexto">
        <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
        <script src="script.js" type="text/javascript"></script>
    </body>
    </html>

0

Wooow, eso era todo? Que curioso de que tenía el código correcto exceptuando esa línea, se lo agradezco, fue muy oportuna y rápida su respuesta @Kiko_L, me salvaste de una! ;)

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.