Comprobar el valor de un campo select y modificarlo en jQuery

27 oct

Ayer os explicabamos como trabajar con los campos checkbox, validar su estado y cambiar su estado mediante jQuery. Hoy vamos a hacer lo mismo pero con un campo select.

Hemos creado 4 botones, 1 botón para comprobar el estado del select, y los otros 3 botones para cambiar la opción seleccionada.

Primero vamos a obtener la opción seleccionada del select, el id y el texto, presionando sobre el botón.

$(document).ready(function(){

	$("#select_comprobar").click(function() {
		alert("Id: "+$("#sexo option:selected").val()+" | Texto: "+$("#sexo option:selected").text());
	});

});

Una vez que presionemos el botón recibiremos en un alert el id y el texto de la opción seleccionada, gracias al atributo option:selected ($("#sexo option:selected").val()$("#sexo option:selected").text())

Para terminar vamos a cambiar la opción seleccionada del select con estos 3 botones:

$(document).ready(function(){

	$("#select_cambiar_defecto").click(function() {
		$("#sexo option[value=0]").attr("selected",true);
	});

	$("#select_cambiar_hombre").click(function() {
		$("#sexo option[value=1]").attr("selected",true);
	});

	$("#select_cambiar_mujer").click(function() {
		$("#sexo option[value=2]").attr("selected",true);
	});

});

El código HTML quedaría así:

<select name="sexo" id="sexo">
<option value="0">- Seleccionar -</option>
<option value="1">Hombre</option>
<option value="2">Mujer</option>
</select>

<input name="select_comprobar" id="select_comprobar" type="button" value="Comprobar" />
<input name="select_cambiar_defecto" id="select_cambiar_defecto" type="button" value="Seleccionar defecto" />
<input name="select_cambiar_hombre" id="select_cambiar_hombre" type="button" value="Seleccionar hombre" />
<input name="select_cambiar_mujer" id="select_cambiar_mujer" type="button" value="Seleccionar mujer" />

3 Respuestas a “Comprobar el valor de un campo select y modificarlo en jQuery”

  1. anRoswell 27 diciembre, 2010 at 17:47 #

    Buena precisamente lo q andaba buscando, te agradesco… Me funciono…

  2. Daniel Santarriaga 4 noviembre, 2011 at 23:24 #

    Hola, un problema no me funciono en Chrome, solo en IE. Es muy raro, si tienes una solución pasamela por correo, gracias.

  3. SAB 29 noviembre, 2011 at 3:16 #

    Me sirvió para aprender algo más, gracias.
    Una consulta, como puedo cambiar al opción seleccionada si no tengo el ‘value’?, si tengo el texto que corresponde.

Agregar un nuevo comentario