Manejando Selects con jQuery

Entrada que actualizaré a medida que vaya aprendiendo😀

Como la mayoría por aquí sabe, me especializo en sistemas orientados a la web (obviamente sigo desarrollando para escritorio y para Android -mientras estén dispuestos a pagar xD-.), y generalmente se necesita programar en 2 capas: Servidor-Cliente.

En el lado Cliente, lo más rápido de usar es jQuery (aunque existen muchas más librerías), y en este post vamos a ver cómo manejar los selects desde aquí.

Como escribí al inicio, esto se va a ir actualizando. Por mientras son 2 ejemplos.

Agregar options

Si lo hacemos desde el servidor es fácil. Escribimos y listo. En java, yo lo hago así:

<%@page import="java.util.List"%>
<%@page import="java.util.Map"%>
<%
    if(session.getAttribute("Nombre") != null){
        if((Boolean)session.getAttribute("supervisor")){
            Modelos.Reserva r = new Modelos.Reserva();
            List<Map<String, Object>> cirugias = (List<Map<String, Object>>)r.getPrestaciones(false);
            out.println("<select id=\"items\">");
            for(Map<String, Object> m : cirugias){
                out.println("<option value=\""+m.get("pk_cirugia")+"\" >"+m.get("nombre")+"</option>");
            }
            out.println("<select id=\"items\">");
%>

Y eso es todo. Pero si necesitáramos cargar un select asíncrono, lo hacemos de esta manera. Suponiendo que como response del servidor tenemos esto:

[{"NOMBRE":"MARIO CARES","COD_PROF":"1"},{"NOMBRE":"JUAN PEREZ","COD_PROF":"2"}] 

Parseamos, Iteramos y Agregamos

var v = $.parseJSON(data);
for(var x in v){
    $("#personas").append("<option value='" + v[x]["COD_PROF"]+"'>" + v[x]["NOMBRE"] +"</option>");
} 

Lo que hacemos es escribir dentro de la etiqueta que tiene el id “personas”.

Obtener value de option seleccionado

Tenemos una persona marcada en el select. Si queremos saber el value:

$("#personas").val();

Seleccionar manualmente una opción

Queremos resaltar una opción, o que se marque al rescatarla desde el servidor.

Si conocemos el value

$('#personas').val(COD_PROF);

La misma función sirve para un get o set😀

Si tenemos el texto

$("#personas option:contains(" + valor + ")").attr('selected', 'selected');

Si tenemos la posición

$('#personas :nth-child('+t+')').attr('selected', 'selected');

Lo anterior lo he estado ocupando en el trabajo que tengo. Si encuentro otras cosas interesantes para compartir, actualizo el post😉

Acerca de MaritoCares

Ingeniero Informático. Con tendencias a la programación en [C#, VB].NET, Java(Web principalmente...), PHP, JavaScript, algo mínimo de [ruby, python], y el clásico C.
Esta entrada fue publicada en JavaScript, Tips. Guarda el enlace permanente.

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s