Índice

Aplicaciones

1. Filtrar una lista

Supongamos una lista de frutas de diferentes variedades. Cuando se selecciona un elemento de formulario de tipo <select>, el script solo mantendrá un tipo de fruta concreta (manzana, pera, uva o fresa).

Aspecto inicial:

images/9_11_1_v41.png

Aspecto obtenido con las fresas:

images/9_11_1_v42.png

Aspecto obtenido con las peras:

images/9_11_1_v43.png

El documento HTML:

<!doctype html> 
<html lang="es"> 
<head> 
<meta charset="utf-8"> 
<title>jQuery</title> 
<script src="jquery.js"></script> 
<script> 
    $(document).ready(function(){ 
        $("#boton").click(function(){ 
            var seleccion = $("#categoria").val(); 
            //show all items 
            if (seleccion == "todos"){ 
                $("li").filter(".item").show(); 
            } else { 
                $("li").filter(".item").hide(); 
                $("li").filter("."+seleccion).show(); 
            } 
        }); 
    }); 
</script> 
<style> 
    ul { 
        list-style-type: ...