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!