This is the first concern I have in my career as a programmer and I really don't understand what is happening. Well, the problem is the following, it is a code to validate addresses using a specific standard that requires both the original fragment and the abbreviation to be displayed, therefore, I have several types of labels in a form (In this case, I am only testing with inputs type text and selects) and as it is known, the select has 2 types of output data, the value (val) and the text for JQuery, make a code to get data directly from a class to be captured as a class array of tags; The first part about the values works correctly for me but here the problem, when I try to show the text of a specific select, it duplicates the output of this, that is,
Try using something similar to
if($(this).is('select')){
$(this + 'option:selected').text();
}
But it didn't work, I think I'm using a wrong syntax or whatever, what bothers me is also how to check if a tag that I call is the tag that I need to get its value (In this case, its selected text) but not I know if it's okay.
This is the code both HTML and JavaScript, I hope you can help me
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>
You can use the syntax
$('option:selected',this).text();
to get thetext
of the objectthis
:Wooow, was that it? How curious that you had the correct code except for that line, I appreciate it, your response @Kiko_L was very timely and fast, you saved me from one! ;)