SelectBox dinâmico

Hoje vamos ver como fazer um selectbox dinâmico, muito utilizado quando temos uma escolha que influencia directamente outra escolha, isto é, por exemplo:

Na escolha de Paises>Cidades>(…), neste exemplo os países influencia o comportamento da selectbox, por isso criamos uma condição em JQuery, para que a selectbox seja totalmente dinâmica.

Pensando já em pseudó-código, seria algo como: Os filhos teriam o ID do pai, quando escolhemos um Pai percorremos todos os Filhos a ver qual deles tem o ID do Pai escolhido e apresentamos essa informação.

Array de dados

Antes de qualquer outro passo, temos de criar a informação a ser apresentada, neste exemplo vamos utilizar uma array estática, mas se for o caso podem ir primeiro a base de dados buscar os dados, saltando assim este passo.

var portugal = [
    {display: "Braga", value: "braga" }, 
    {display: "Porto", value: "porto" }, 
    {display: "Lisboa", value: "lisboa" },
    {display: "Bragança", value: "braganca" }];
    
var espanha = [
    {display: "Barcelona", value: "barcelona" }, 
    {display: "Sevilha", value: "sevilha" }, 
    {display: "Madri", value: "madri" },
    {display: "Granada", value: "granada" }];
    
var brasil = [
    {display: "guanambi", value: "guanambi" }, 
    {display: "brumado", value: "brumado" }, 
    {display: "caetite", value: "caetite" },
    {display: "vitoria da conquista", value: "vitoria-da-conquista" }];

JQuery

Com o JQuery vamos fazer a ‘actualização’ da selecbox independentemente da escolha que utilizador seleccionar.

$("#parent_selection").change(function() {
    var parent = $(this).val(); 
    switch(parent){ 
        case 'portugal':
             list(chocolates);
            break;
        case 'espanha':
             list(vegetables);
            break;              
        case 'brasil':
             list(icecreams);
            break;  
        default: // por padrão será apresentará null (branco)
            $("#child_selection").html('');  
            break;
           }
});

function list(array_list)
{
    $("#child_selection").html(""); // reset
    $(array_list).each(function (i) { 
        $("#child_selection").append("<option value=""+array_list[i].value+"">"+array_list[i].display+"</option>");
    });
}

HTML

E por final realizamos a selectbox em html.

Pais: <select name="parent_selection" id="parent_selection">
    <option value="">-- Escolha uma opção --</option>
    <option value="portugal">Portugal</option>
    <option value="espanha">Espanha</option>
    <option value="brasil">Brasil</option>
</select>
<select name="child_selection" id="child_selection"></select>

Pode realizar o download do projecto final aqui!

Abraço e até à próxima!