Comunidad de diseño web y desarrollo en internet

"selected" en la etiqueta SELECT y no en OPTION con AJAX

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 :P

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.

Publica tu comentario

o puedes...

¿Estás registrado en Cristalab y quieres
publicar tu URL y avatar?

¿No estás registrado aún pero quieres hacerlo antes de publicar tu comentario?

Registrate