Vou mostrar como popular um combobox de cidades através de um resultado em JSON, usando o framework javascript Prototype.
Eu tenho um formulário com dois comboboxs um de estado e outro de cidade, quando o usuário selecionar o estado é buscada as cidades através de um webservice que retorna um JSON.
Meu formulário:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 | <form name="exemplo" id="exemplo" method="post">
<table>
<tbody>
<tr>
<th><label for="state">Estado</label></th>
<td>
<select id="state" name="state">
<option value="0"/>
<option value="1">AC</option>
<option value="2">AL</option>
<option value="3">AM</option>
<option value="4">AP</option>
<option value="5">BA</option>
<option value="6">CE</option>
<option value="7">DF</option>
<option value="8">ES</option>
<option value="9">GO</option>
<option value="10">MA</option>
<option value="11">MG</option>
<option value="12">MS</option>
<option value="13">MT</option>
<option value="14">PA</option>
<option value="15">PB</option>
<option value="16">PE</option>
<option value="17">PI</option>
<option value="18">PR</option>
<option value="19">RJ</option>
<option value="20">RN</option>
<option value="21">RO</option>
<option value="22">RR</option>
<option value="23">RS</option>
<option value="24">SC</option>
<option value="25">SE</option>
<option value="26">SP</option>
<option value="27">TO</option>
</select>
</td>
</tr>
<tr>
<th><label for="city">Cidade</label></th>
<td>
<select id="city" name="city"></select>
</td>
</tr>
</tbody>
</table>
</form> |
Para todo o código javascript abaixo funcionar, é necessário ter as bibliotecas javascripts do Prototype incluídas na página.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 | <script language="JavaScript"> // Quando ocorrer o evento onchange no combobox chama a função getCitiesByStateId $('state').observe('change', function() { getCitiesByStateId() }); /** * Busca todas cidades de um estado * @param object obj * Informações do elemento */ function getCitiesByStateId() { var state = $('state'); if (state.value > 0) { var url = '/url_do_seu_webservice_que_vai_retornar_o_json/state_id/' + state.value; makeRequest(url, 'city'); } } /** * Realiza a requisição ajax para o webservice * obtém os resultados e preenche o combobox * @param strung url * Url da requisição * @param string combobox_fill_id * Combobox para ser preenchida */ function makeRequest(url, combobox_fill_id) { new Ajax.Request(url, { method: 'get', onLoading: function() { loadingComboBox(combobox_fill_id) }, onSuccess: function(transport) { if (200 == transport.status) { var response = eval('(' + transport.responseText + ')'); fillComboBox(combobox_fill_id, response); } } }); } /** * Preenche a combobox com os valores de retorno * @param string name * Combobox a ser preenchida * @param object response * Objeto de resposta */ function fillComboBox(name, response) { cleanComboBox(name); $(name).insert(new Element('option', {value: ''}).insert('')); response.each ( function(pair) { $(name).insert(new Element('option', {value: pair.id}).insert(pair.name)); } ); } /** * Remove todos os elementos da combobox * @param string name * Id da combobox para limpar */ function cleanComboBox(name) { $(name).descendants().invoke('remove'); } /** * Exibe a mensagem de aguarde... na combobox enquanto os dados estão sendo requisitados */ function loadingComboBox(name) { cleanComboBox(name); $(name).insert(new Element('option', {value: ''}).insert('Aguarde...')); } </script> |
O código acima não precisa de muitas explicações, já está bem dividido em funções e comentado.
O meu webservice retorna um JSON no seguinte formato:
1 2 | [[3037,"Abati\u00e1"],[3038,"Adrian\u00f3polis"],[3039,"Agudos do Sul"],[160,"Almirante Tamandar\u00e9"],[3040,"Altamira do Paran\u00e1"],[3043,"Alt\u00f4nia"],[3041,"Alto Paran\u00e1"],[3042,"Alto Piquiri"],[3044,"Alvorada do Sul"],[3045,"Amapor\u00e3"],[3046,"Amp\u00e9re"],[3047,"Anahy"],[3048,"Andir\u00e1"],[3049,"\u00c2ngulo"],[3050,"Antonina"],[3051,"Ant\u00f4nio Olinto"],[174,"Apucarana"],[163,"Arapongas"],[3052,"Arapoti"],[3053,"Arapu\u00e3"],[3054,"Araruna"],[173,"Arauc\u00e1ria"],[3055,"Ariranha do Iva\u00ed"],[3056,"Assa\u00ed"],[3057,"Assis Chateaubriand"],[3058,"Astorga"],[3059,"Atalaia"],[3060,"Balsa Nova"],[3061,"Bandeirantes"],[3062,"Barbosa Ferraz"],[3064,"Barrac\u00e3o"],[3063,"Barra do Jacar\u00e9"],[3065,"Bela Vista da Caroba"],[3066,"Bela Vista do Para\u00edso"],[3067,"Bituruna"],[3068,"Boa Esperan\u00e7a"],[3069,"Boa Esperan\u00e7a do Igua\u00e7u"],[3070,"Boa Ventura de S\u00e3o Roque"],[3071,"Boa Vista da Aparecida"],[3072,"Bocai\u00fava do Sul"],[3073,"Bom Jesus do Sul"],[3074,"Bom Sucesso"],[3075,"Bom Sucesso do Sul"],[3076,"Borraz\u00f3polis"],[3077,"Braganey"],[3078,"Brasil\u00e2ndia do Sul"],[3079,"Cafeara"],[3080,"Cafel\u00e2ndia"],[3081,"Cafezal do Sul"],[3082,"Calif\u00f3rnia"],[3083,"Cambar\u00e1"],[170,"Camb\u00e9"],[3084,"Cambira"],[3085,"Campina da Lagoa"],[3086,"Campina do Sim\u00e3o"],[3087,"Campina Grande do Sul"],[3088,"Campo Bonito"],[3089,"Campo do Tenente"],[159,"Campo Largo"],[3090,"Campo Magro"],[162,"Campo Mour\u00e3o"],[3091,"C\u00e2ndido de Abreu"],[3092,"Cand\u00f3i"],[3093,"Cantagalo"],[3094,"Capanema"],[3095,"Capit\u00e3o Le\u00f4nidas Marques"],[3096,"Carambe\u00ed"],[3097,"Carl\u00f3polis"],[166,"Cascavel"],[161,"Castro"],[3098,"Catanduvas"],[3099,"Centen\u00e1rio do Sul"],[3100,"Cerro Azul"],[3101,"C\u00e9u Azul"],[3102,"Chopinzinho"],[3103,"Cianorte"],[3104,"Cidade Ga\u00facha"],[3105,"Clevel\u00e2ndia"],[171,"Colombo"],[3106,"Colorado"],[3107,"Congonhinhas"],[3108,"Conselheiro Mairinck"],[3109,"Contenda"],[3110,"Corb\u00e9lia"],[3111,"Corn\u00e9lio Proc\u00f3pio"],[3112,"Coronel Domingos Soares"],[3113,"Coronel Vivida"],[3114,"Corumbata\u00ed do Sul"],[3116,"Cruzeiro do Igua\u00e7u"],[3117,"Cruzeiro do Oeste"],[3118,"Cruzeiro do Sul"],[3115,"Cruz Machado"],[3119,"Cruzmaltina"],[164,"Curitiba"],[3120,"Curi\u00fava"],[3121,"Diamante d'Oeste"],[3122,"Diamante do Norte"],[3123,"Diamante do Sul"],[3124,"Dois Vizinhos"],[3125,"Douradina"],[3126,"Doutor Camargo"],[3127,"Doutor Ulysses"],[3128,"En\u00e9as Marques"],[3129,"Engenheiro Beltr\u00e3o"],[3130,"Entre Rios do Oeste"],[3131,"Esperan\u00e7a Nova"],[3132,"Espig\u00e3o Alto do Igua\u00e7u"],[3133,"Farol"],[3134,"Faxinal"],[3135,"Fazenda Rio Grande"],[3136,"F\u00eanix"],[3137,"Fernandes Pinheiro"],[3138,"Figueira"],[3140,"Flora\u00ed"],[3139,"Flor da Serra do Sul"],[3141,"Floresta"],[3142,"Florest\u00f3polis"],[3143,"Fl\u00f3rida"],[3144,"Formosa do Oeste"],[152,"Foz do Igua\u00e7u"],[3145,"Foz do Jord\u00e3o"],[3146,"Francisco Alves"],[153,"Francisco Beltr\u00e3o"],[3147,"General Carneiro"],[3148,"Godoy Moreira"],[3149,"Goioer\u00ea"],[3150,"Goioxim"],[3151,"Grandes Rios"],[3152,"Gua\u00edra"],[3153,"Guaira\u00e7\u00e1"],[3154,"Guamiranga"],[3155,"Guapirama"],[3156,"Guaporema"],[3157,"Guaraci"],[3158,"Guarania\u00e7u"],[168,"Guarapuava"],[3159,"Guaraque\u00e7aba"],[3160,"Guaratuba"],[3161,"Hon\u00f3rio Serpa"],[3162,"Ibaiti"],[3163,"Ibema"],[3164,"Ibipor\u00e3"],[3165,"Icara\u00edma"],[3166,"Iguara\u00e7u"],[3167,"Iguatu"],[3168,"Imba\u00fa"],[3169,"Imbituva"],[3170,"In\u00e1cio Martins"],[3171,"Inaj\u00e1"],[3172,"Indian\u00f3polis"],[3173,"Ipiranga"],[3174,"Ipor\u00e3"],[3175,"Iracema do Oeste"],[3176,"Irati"],[3177,"Iretama"],[3178,"Itaguaj\u00e9"],[3179,"Itaipul\u00e2ndia"],[3180,"Itambarac\u00e1"],[3181,"Itamb\u00e9"],[3182,"Itapejara d'Oeste"],[3183,"Itaperu\u00e7u"],[3184,"Ita\u00fana do Sul"],[3185,"Iva\u00ed"],[3186,"Ivaipor\u00e3"],[3187,"Ivat\u00e9"],[3188,"Ivatuba"],[3189,"Jaboti"],[3190,"Jacarezinho"],[3191,"Jaguapit\u00e3"],[3192,"Jaguaria\u00edva"],[3193,"Jandaia do Sul"],[3194,"Jani\u00f3polis"],[3195,"Japira"],[3196,"Japur\u00e1"],[3197,"Jardim Alegre"],[3198,"Jardim Olinda"],[3199,"Jataizinho"],[3200,"Jesu\u00edtas"],[3201,"Joaquim T\u00e1vora"],[3202,"Jundia\u00ed do Sul"],[3203,"Juranda"],[3204,"Jussara"],[3205,"Kalor\u00e9"],[3206,"Lapa"],[3207,"Laranjal"],[177,"Laranjeiras do Sul"],[3208,"Le\u00f3polis"],[3209,"Lidian\u00f3polis"],[3210,"Lindoeste"],[3211,"Loanda"],[3212,"Lobato"],[165,"Londrina"],[3213,"Luiziana"],[3214,"Lunardelli"],[3215,"Lupion\u00f3polis"],[3216,"Mallet"],[3217,"Mambor\u00ea"],[3218,"Mandagua\u00e7u"],[3219,"Mandaguari"],[3220,"Mandirituba"],[3221,"Manfrin\u00f3polis"],[3222,"Mangueirinha"],[3223,"Manoel Ribas"],[3224,"Marechal C\u00e2ndido Rondon"],[3225,"Maria Helena"],[3226,"Marialva"],[3227,"Maril\u00e2ndia do Sul"],[3228,"Marilena"],[3229,"Mariluz"],[151,"Maring\u00e1"],[3230,"Mari\u00f3polis"],[3231,"Marip\u00e1"],[3232,"Marmeleiro"],[3233,"Marquinho"],[3234,"Marumbi"],[3235,"Matel\u00e2ndia"],[3236,"Matinhos"],[3237,"Mato Rico"],[3238,"Mau\u00e1 da Serra"],[3239,"Medianeira"],[3240,"Mercedes"],[3241,"Mirador"],[3242,"Miraselva"],[3243,"Missal"],[3244,"Moreira Sales"],[3245,"Morretes"],[3246,"Munhoz de Melo"],[3247,"Nossa Senhora das Gra\u00e7as"],[3248,"Nova Alian\u00e7a do Iva\u00ed"],[3249,"Nova Am\u00e9rica da Colina"],[3250,"Nova Aurora"],[3251,"Nova Cantu"],[3252,"Nova Esperan\u00e7a"],[3253,"Nova Esperan\u00e7a do Sudoeste"],[3254,"Nova F\u00e1tima"],[3255,"Nova Laranjeiras"],[3256,"Nova Londrina"],[3257,"Nova Ol\u00edmpia"],[3258,"Nova Prata do Igua\u00e7u"],[3259,"Nova Santa B\u00e1rbara"],[3260,"Nova Santa Rosa"],[3261,"Nova Tebas"],[3262,"Novo Itacolomi"],[3263,"Ortigueira"],[3264,"Ourizona"],[3265,"Ouro Verde do Oeste"],[3266,"Pai\u00e7andu"],[3267,"Palmas"],[3268,"Palmeira"],[3269,"Palmital"],[3270,"Palotina"],[3271,"Para\u00edso do Norte"],[3272,"Paranacity"],[167,"Paranagu\u00e1"],[3273,"Paranapoema"],[155,"Paranava\u00ed"],[3274,"Pato Bragado"],[169,"Pato Branco"],[3275,"Paula Freitas"],[3276,"Paulo Frontin"],[3277,"Peabiru"],[3278,"Perobal"],[3279,"P\u00e9rola"],[3280,"P\u00e9rola d'Oeste"],[3281,"Pi\u00ean"],[176,"Pinhais"],[3283,"Pinhal\u00e3o"],[3282,"Pinhal de S\u00e3o Bento"],[3284,"Pinh\u00e3o"],[3285,"Pira\u00ed do Sul"],[156,"Piraquara"],[3286,"Pitanga"],[3287,"Pitangueiras"],[3288,"Planaltina do Paran\u00e1"],[3289,"Planalto"],[154,"Ponta Grossa"],[3290,"Pontal do Paran\u00e1"],[3291,"Porecatu"],[3292,"Porto Amazonas"],[3293,"Porto Barreiro"],[3294,"Porto Rico"],[3295,"Porto Vit\u00f3ria"],[3296,"Prado Ferreira"],[3297,"Pranchita"],[3298,"Presidente Castelo Branco"],[3299,"Primeiro de Maio"],[3300,"Prudent\u00f3polis"],[3301,"Quarto Centen\u00e1rio"],[3302,"Quatigu\u00e1"],[3303,"Quatro Barras"],[3304,"Quatro Pontes"],[3305,"Quedas do Igua\u00e7u"],[3306,"Quer\u00eancia do Norte"],[3307,"Quinta do Sol"],[3308,"Quitandinha"],[3309,"Ramil\u00e2ndia"],[3310,"Rancho Alegre"],[3311,"Rancho Alegre d'Oeste"],[3312,"Realeza"],[3313,"Rebou\u00e7as"],[3314,"Renascen\u00e7a"],[3315,"Reserva"],[3316,"Reserva do Igua\u00e7u"],[3317,"Ribeir\u00e3o Claro"],[3318,"Ribeir\u00e3o do Pinhal"],[3319,"Rio Azul"],[3320,"Rio Bom"],[3321,"Rio Bonito do Igua\u00e7u"],[3322,"Rio Branco do Iva\u00ed"],[3323,"Rio Branco do Sul"],[3324,"Rio Negro"],[3325,"Rol\u00e2ndia"],[3326,"Roncador"],[3327,"Rondon"],[3328,"Ros\u00e1rio do Iva\u00ed"],[3329,"Sab\u00e1udia"],[3330,"Salgado Filho"],[3331,"Salto do Itarar\u00e9"],[3332,"Salto do Lontra"],[3333,"Santa Am\u00e9lia"],[3334,"Santa Cec\u00edlia do Pav\u00e3o"],[3335,"Santa Cruz de Monte Castelo"],[3336,"Santa F\u00e9"],[3337,"Santa Helena"],[3338,"Santa In\u00eas"],[3339,"Santa Isabel do Iva\u00ed"],[3340,"Santa Izabel do Oeste"],[3341,"Santa L\u00facia"],[3342,"Santa Maria do Oeste"],[3343,"Santa Mariana"],[3344,"Santa M\u00f4nica"],[3347,"Santana do Itarar\u00e9"],[3345,"Santa Tereza do Oeste"],[3346,"Santa Terezinha de Itaipu"],[3348,"Santo Ant\u00f4nio da Platina"],[3349,"Santo Ant\u00f4nio do Caiu\u00e1"],[3350,"Santo Ant\u00f4nio do Para\u00edso"],[3351,"Santo Ant\u00f4nio do Sudoeste"],[3352,"Santo In\u00e1cio"],[3353,"S\u00e3o Carlos d o Iva\u00ed"],[3354,"S\u00e3o Jer\u00f4nimo da Serra"],[3355,"S\u00e3o Jo\u00e3o"],[3356,"S\u00e3o Jo\u00e3o do Caiu\u00e1"],[3357,"S\u00e3o Jo\u00e3o do Iva\u00ed"],[3358,"S\u00e3o Jo\u00e3o do Triunfo"],[3359,"S\u00e3o Jorge d'Oeste"],[3360,"S\u00e3o Jorge do Iva\u00ed"],[3361,"S\u00e3o Jorge do Patroc\u00ednio"],[3362,"S\u00e3o Jos\u00e9 da Boa Vista"],[3363,"S\u00e3o Jos\u00e9 das Palmeiras"],[175,"S\u00e3o Jos\u00e9 dos Pinhais"],[3364,"S\u00e3o Manoel do Paran\u00e1"],[3365,"S\u00e3o Mateus do Sul"],[3366,"S\u00e3o Miguel do Igua\u00e7u"],[3367,"S\u00e3o Pedro do Igua\u00e7u"],[3368,"S\u00e3o Pedro do Iva\u00ed"],[3369,"S\u00e3o Pedro do Paran\u00e1"],[3370,"S\u00e3o Sebasti\u00e3o da Amoreira"],[3371,"S\u00e3o Tom\u00e9"],[3372,"Sapopema"],[150,"Sarandi"],[3373,"Saudade do Igua\u00e7u"],[3374,"Seng\u00e9s"],[3375,"Serran\u00f3polis do Igua\u00e7u"],[3376,"Sertaneja"],[3377,"Sertan\u00f3polis"],[3378,"Siqueira Campos"],[3379,"Sulina"],[3380,"Tamarana"],[3381,"Tamboara"],[3382,"Tapejara"],[3383,"Tapira"],[3384,"Teixeira Soares"],[158,"Tel\u00eamaco Borba"],[3385,"Terra Boa"],[3386,"Terra Rica"],[3387,"Terra Roxa"],[3388,"Tibagi"],[3389,"Tijucas do Sul"],[172,"Toledo"],[3390,"Tomazina"],[3391,"Tr\u00eas Barras do Paran\u00e1"],[3392,"Tunas do Paran\u00e1"],[3393,"Tuneiras do Oeste"],[3394,"Tup\u00e3ssi"],[3395,"Turvo"],[3396,"Ubirat\u00e3"],[157,"Umuarama"],[3397,"Uni\u00e3o da Vit\u00f3ria"],[3398,"Uniflor"],[3399,"Ura\u00ed"],[3400,"Ventania"],[3401,"Vera Cruz do Oeste"],[3402,"Ver\u00ea"],[3403,"Vila Alta"],[3404,"Virmond"],[3405,"Vitorino"],[3406,"Wenceslau Braz"],[3407,"Xambr\u00ea"]] |
