Una de las características que me gustaría que tuviese HTML es que se pudiese colocar el atributo "selected" en la etiqueta SELECT y no en la etiqueta OPTION correspondiente.
De esta manera me ahorraría tener que generar dinámicamente cada combobox en PHP, con un for / foreach hasta alcanzar el elemento "option" que necesita el atributo "selected".
El asunto se complica cuando tenemos una lista o una tabla donde cada fila lleva un select que necesita tener una opción "selected". Este caso se da sobretodo en aplicaciones más complejas, donde la mayoría de las veces tenemos funcionalidades que necesitan que el usuario tenga activado Javascript.
Así que creé un pequeño plugin para Jquery que permite "modificar" el HTML y hacer que el selected pase a la etiqueta <select>:
Código :
$.fn.selectOption = function() {
return this.each(function() { //para cada combo box ejecutamos la siguiente funcion
id = $(this).attr('id');
//el "selected" se podria cambiar por "title" u otro atributo si queremos un html mas valido
val = $(this).attr('selected');
//si no hay un id, agregamos uno temporalmente
if(!id) {
id = 'fake_id';
$(this).attr('id', 'fake_id');
fakeId = true;
} else {
fakeId = false;
}
if(val) {
//y aqui lo mas importante, utilizamos el selector de jquery para buscar el option que necesita
//el atributo selected y agregarselo...
$('#' + id + ' option[@value='+val+']').attr('selected', 'selected');
}
//eliminamos el id temporal en caso de haberlo utilizado
if(fakeId) {
$(this).removeAttr('id');
}
});
}Lo único que tenemos que hacer es agregar el atributo selected a nuestra etiqueta select, y cuando esté cargada la página llamar a la función:
Código :
$(window).load(function() {
//llamamos la funcion para todos los combobox o elementos select
//podriamos cambiar aquí a algo como: select.MI_CLASE o select#MI_ID
$("select").selectOption();
});Aquí el código completo con comentarios:
Código :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Jquery select</title>
</head>
<body>
<script type="text/javascript" language="javascript" src="jquery.js"></script>
<script type="text/javascript">
$.fn.selectOption = function() {
return this.each(function() { //para cada combo box ejecutamos la siguiente funcion
id = $(this).attr('id');
//el "selected" se podria cambiar por "title" u otro atributo si queremos un html mas valido
val = $(this).attr('selected');
//si no hay un id, agregamos uno temporalmente
if(!id) {
id = 'fake_id';
$(this).attr('id', 'fake_id');
fakeId = true;
} else {
fakeId = false;
}
if(val) {
//y aqui lo mas importante, utilizamos el selector de jquery para buscar el option que necesita
//el atributo selected y agregarselo...
$('#' + id + ' option[@value='+val+']').attr('selected', 'selected');
}
//eliminamos el id temporal en caso de haberlo utilizado
if(fakeId) {
$(this).removeAttr('id');
}
});
}
$(window).load(function() {
//llamamos nuestra función para todos los combobox o elementos select
//podríamos cambiar aquí a algo como: select.MI_CLASE o select#MI_ID
$("select").selectOption();
});
</script>
<form action="http://somesite.com/prog/someprog" method="post">
<label for="combosimple">Combo simple: </label>
<select name="combosimple" selected="IRX_3.5R">
<option label="none" value="none">None</option>
<option label="3.7.1" value="pm3_3.7.1">PortMaster 3 with ComOS 3.7.1</option>
<option label="3.7" value="pm3_3.7">PortMaster 3 with ComOS 3.7</option>
<option label="3.5" value="pm3_3.5">PortMaster 3 with ComOS 3.5</option>
<option label="3.7R" value="IRX_3.7R">IRX with ComOS 3.7R</option>
<option label="3.5R" value="IRX_3.5R">IRX with ComOS 3.5R</option>
</select>
<label for="combomultiple">Combo multiple: </label>
<select name="combomultiple" selected="IRX_3.5R">
<option label="none" value="none">None</option>
<optgroup label="PortMaster 3">
<option label="3.7.1" value="pm3_3.7.1">PortMaster 3 with ComOS 3.7.1</option>
<option label="3.7" value="pm3_3.7">PortMaster 3 with ComOS 3.7</option>
<option label="3.5" value="pm3_3.5">PortMaster 3 with ComOS 3.5</option>
</optgroup>
<optgroup label="PortMaster 2">
<option label="3.7" value="pm2_3.7">PortMaster 2 with ComOS 3.7</option>
<option label="3.5" value="pm2_3.5">PortMaster 2 with ComOS 3.5</option>
</optgroup>
<optgroup label="IRX">
<option label="3.7R" value="IRX_3.7R">IRX with ComOS 3.7R</option>
<option label="3.5R" value="IRX_3.5R">IRX with ComOS 3.5R</option>
</optgroup>
</select>
</form>
</body>
</html>Recuerden descargar y agregar el Jquery para que el código funcione
También recuerden que esto SÓLO funcionará si el usuario tiene el Javascript activado, por lo que recomendaría sólo usarlo en aplicaciones y sistemas que necesiten Javascript para funcionar, y no en páginas web comunes.
Pueden bajar el ejemplo aquí.
¿Sabes SQL? ¿No-SQL? Aprende MySQL, PostgreSQL, MongoDB, Redis y más con el Curso Profesional de Bases de Datos que empieza el martes, en vivo.
Line 9, Column 39: there is no attribute "selected".
Código :
Por lo que en el código comento que si gustan pueden cambiar esta parte del código del plugin:
Código :
//el "selected" se podria cambiar por "title" u otro atributo si queremos un html mas valido val = $(this).attr('selected');y entonces en el select colocarías title="IRX_3.5R" o en vez de title podría ser cualquier otra etiqueta válida, cual sería preferible?
Gracias por la aclaración , no llegue a leer ese comentario. Realmente es un buen código, espero ponerlo en práctica pronto.
por cierto, tu avatar es c00l
Por Pedro Vargas. el 10 de Diciembre de 2010
quiero mostrar unos registros seleccionando la opción..
Esto es lo que yo encontré, no me marca error, pero tampoco me sube los registros, si alguien me pudiese decir cual es mi error se lo agradecería mucho.
<html><head></head><body>
<select name="nombre">
$conexion=mysql_connect("localhost","root","") or die("PROBLEMAS DE CONECCION CON USUARIO".mysql_error());
mysql_select_bd("tienda",$conexion);
$registros=mysql_query("select * from tipos",$conexion)
while($reg=myslq_fetch_array($registros))
{
echo "<option value=$reg[id_tipo]>$reg[nom_tip]</option>";
}
</select>
</body></html>
.....Cual es mi errro??
Por alejo el 31 de Mayo de 2011