Lista desplegable atractiva en tu formulario html. SELECT.


La necesidad me surgió cuando estaba desarrollando una pantalla para registro de dominios en la empresa Solo10.com.

Resulta más atractivo una lista desplegable (select) del html convencional?

lista desplegable html convencional

O una lista desplegable personalizada así?

lista desplegable personalizada jquery

Nota: Los desplegables permiten al usuario seleccionar una única opción dentro de una lista. Cuando deseamos permitirle la selección de múltiples opciones, podemos trabajar con las casillas de verificación checkbox.

Lograr éste efecto atractivo es muy sencillo gracias a un script Jquery que escribió la gente de mbe Web Developers. Y tranquilo, no es necesario saber de Jquery :-), sólo se necesita:

lista desplegable personalizada jquery

Hasta aquí logras el siguiente efecto que ya viene definido por default:

lista desplegable personalizada jquery

 

Luego, tienes disponible el css para ponerte a jugar con tu diseñador y darle linda gráfica :-). Lo encuentras en la ruta /select_replacement/style.css del script.

En la segunda clase del Curso de PHP y Mysql a distancia aprendemos con mayor profundidad a trabajar con formularios html y sus elementos (campos de texto, desplegables, checkbox, radio, submit, etc).

Resolución de problemas habituales:

Problemas de visualización de las listas desplegables html en algunos navegadores.

Uno de los problemas habituales que podemos encontrarnos a la hora de desarrollar nuestra lista desplegable html con estilo personalizado es la compatibilidad entre navegadores. En muchas ocasiones podemos encontrar que nuestro desarrollo es correcto en el navegador que hemos probado pero un usuario detecta que accediendo desde otro navegador la lista desplegable no se visualiza correctamente. Hay que tener en cuenta que no todos los navegadores muestran las listas desplegables de la misma forma, por eso es importante tener claro en que navegadores es necesario que se vea correctamente nuestra página.

En muchas ocasiones el problema de compatibilidad entre navegadores puede corregirse modificando los estilos css y sustituyendolos por unos estilos que sean compatibles en todos los estandar de html y css a los que queremos dar soporte. Si mediante modificaciones en los css no logras que la lista se visualice correctamente es posible que la solución tenga que contar con algunas modificaciones en los javascript.

El Curso es una opción para aprender programación PHP desde la comodidad de tu casa y con ayuda de un profesor. ¡Participa!


Nota del autor: Busco programadores y diseñadores freelance para colaborarme con proyectos. Mostrame tus trabajos desarrollados, escribime!


Te agradaría derivar tu proyecto a un programador con años de experiencia?

Ing. Diego Angelini.
Autor de BlogdePHP.com
Programador Web Freelance






Porfolio de proyectos
  • anónimo

    muy bueno el articulo. solo hay un problemilla, como puedo seleccionar un valor concreto que me venga de la base de datos? es decir si me viene el numero 4 que semuestre el number 4, o cualquier otro que me venga.

    gracias!!!

  • http://www.blogdephp.com/ BlogdePhp.com

    Hola David, escribí un post para desarrollar la respuesta a tu consulta.
    http://www.blogdephp.com/como-mostrar-datos-mysql-en-lista-desplegable-select-en-php/

    Comentame si te sirve, un abrazo y gracias por participar!

  • Alberto

    Es esactamente lo que estaba buscando, pero la publicidad en esta pagina es tan molesta que hace dificil seguir lo que uno debe hacer. Voy a aplicarlo y les cuento.

  • fanny

    una pregunta, espero me puedas ayudar porfavor,tengo un desplegable pero con dos grupos(porcelana)y(metales) con sus opciones, tengo una BD en mysql con dos tablas que se llaman igual que mis grupos(porcelana) y (metales), lo que quiero es que al seleccionar una opcion de ambos grupos, en otro campo de texto en html me muestre su costo, el cual ya tengo registrado en mi base de datos, como le puedo hacer? me podrias orientar?
    quiero que en automatico me arroje el precio