jQuery nos permite manejar de forma muy sencilla los formularios con un amplio conjunto de métodos. En este caso vamos a ver cómo podemos acceder a la lista de opciones seleccionadas de un combo y mostrarlas por pantalla utilizando la librería jQuery.

En primer lugar vamos a pintar el combo (esta vez va de fútbol):

  
    Barça
    Real Madrid
    Atlético Madrid
    Valencia CF
    Real Betis
    Deportivo de la Coruña
  

Si queremos que puedan existir varias opciones seleccionadas dentro del combo deberemos de utilizar el atributo multiple=»multiple» dentro del select. De igual manera, si queremos prefijar una de las opciones deberemos de utilizar el atributo selected=»selected».

Listaremos las opciones seleccionadas del combo cada vez que haya un cambio en dicho combo. Para ello vamos a manejar el método .change() de jQuery. En cada cambio ejecutaremos la función que le digamos al método .change().

$(document).ready(function(){
  $("#equipos").change(function(){
    ...		
  });		 	
});

Y ¿qué va a hacer nuestra función? Pues recorrer el elemento select. Pero no todo el elemento select, si no aquellas opciones que estén seleccionadas. Así que vamos a utilizar un selector. El selector será:

#equipos option:selected

Es decir, del combo o select ‘equipos’ elige aquellas opciones, u option, que estén seleccionadas, es decir ‘selected’.

Ahora, de cada opción obtendremos su valor mediante el método .text()

$("#equipos option:selected").each(function() {			
  texto += $(this).text() + " - ";			
});

Ya solo nos quedará volcar el contenido en alguna capa de nuestra página. Para ello creamos un elemento DIV al que llamaremos ‘resultado’ y al que volcaremos los datos mediante:

$("#resultado").text(texto);

Solo nos queda un pequeño detalle. Y es que si hemos puesto campos seleccionados de antemano, si queremos que se ejecute nuestro método .change(), podemos simular el ejecutarlo mediante el método .trigger()

$("#equipos").trigger('change');

De esta manera tendremos la primera ejecución del .change(). El código entero nos quedará de la siguiente forma:

$(document).ready(function(){
  $("#equipos").change(function(){
		
    var texto = "Opciones Seleccionadas: ";
    $("#equipos option:selected").each(function() {			
      texto += $(this).text() + " - ";			
    });
		
    $("#resultado").text(texto);
		
  }).trigger('change');		 	
});

Si el otro día vimos como seleccionar el texto de un campo (por defecto o mediante un click del usuario), hoy vamos a ver como seleccionar texto al posicionarse en un campo con jQuery. Es decir, al ir moviéndonos por los campos y llegar al determinado campo seleccionaremos el texto.

Controlar el posicionarse en un campo lo podremos hacer mediante el método .focus() de jQuery. Pero lo primero, el formulario. Como siempre, algo simple:

	Inserta texto:
	

	Inserta texto:
	
	

Como la selección del texto al posicionarse en un campo lo vamos a aplicar a todos los campos input (de tipo text) vamos a utilizar un selector.

input[type=text]

Así que el método .focus() se quedará de la siguiente forma:

$("input[type=text]").focus(function(){ ... });

Ya solo nos quedará realizar la selección del campo de texto mediante el método .select() de jQuery.

$("input[type=text]").focus(function(){	   
  this.select();
});

Seleccionar el texto de un campo nos posibilita guiar al usuario de nuestra web en la edición de textos. La idea es dejarle un campo marcado dentro del formulario. Para ello nos vamos a apoyar en jQuery.

Lo primero es poner el formulario. Nada complicado si sabes HTML:

	Inserta texto:
	
	
	Texto por defecto

	Seleccionar todo el texto

Ahora, y tras haber cargado nuestra librería jQuery…

… nos apoyamos en el método .select() para aplicarselo a un campo. Por ejemplo si queremos seleccionar el texto del campo con id ‘texto’ tendremos que codificar lo siguiente:

$("#texto").select();

Otra opción es hacerlo bajo demanda. Lo que viene a ser el típico botón de «Seleccionar Todo». Que en nuestro caso hemos representado con un elemento button.

En jQuery conseguiremos capturar el click sobre el botón con el método .click(). Así el código quedará de la siguiente forma:

$("#selectall").click( function(){
  $("#areatexto").select();
  return false;
});

Hay que tener en cuenta dos cosas. Que para acceder a los id de los elementos utilizamos una almohadilla delante del nombre. Y que al final del .click() hemos utilizado un return false para parar el evento generado por el botón.

Ya hemos visto dos formas muy sencillas de seleccionar el texto de un campo. ¿Se te ocurre otra forma?