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" />
Comentarios