Alimentando uma ComboBox dinamicamente utilizando técnicas AJAX

28/11/2005 12:00:00

Autor: Rondinely S. de Almeida

Serviços para Webmasters

Exemplos:01.php

Na linha vinte e oito armazenamos o conteúdo do arquivo na variável local 'result', para isto utilizamos a propriedade 'responseXML' do objeto 'XMLHttpRequest', desta forma armazenamos os dados como um objeto XML que poderemos manipular como um objeto DHTML.

Na linha vinte e nove criamos uma array 'cidades' com todos as tags 'nome' encontradas no arquivo de dados. Na linha seguinte apagamos o todo o conteúdo da ComboBox de destino com o auxílio da propriedade 'innerHTML'.

A seguir criamos um laço 'for' que tratará todas a opções que estavam no arquivo de dados criando um objeto DHTML 'option' para cada uma delas e adicionando este novo objeto a ComboBox de destino. Para isto será utilizada a função 'create_opcao'.

Não deixe de ver também:

38: function create_opcao(cidade) { 
39:    var new_opcao = document.createElement("option"); 
40:    var texto = document.createTextNode(cidade.childNodes[0].data);
41:    new_opcao.setAttribute("value",cidade.getAttribute("id"));
42:    new_opcao.appendChild(texto); //Adiciona o texto a OPTION.
43:    return new_opcao; // Retorna a nova OPTION.
44: }

Esta função recebe como argumento o objeto XML que possui o nome das cidades a serem incluídas na ComboBox de destino, cria um novo elemento 'option' (linha 39), cria um novo nó de texto com o conteúdo do objeto XML (linha 40), cria o atributo 'value' para a nova opção de acordo com o atributo do objeto passado como argumento (linha 41), adiciona o texto criado anteriormente a nova opção (linha 42) e finalmente retorna o novo objeto DHTML para ser agregado a ComboBox de destino.

Pronto, agora já sabemos como alimentar dinamicamente uma ComboBox de acordo com uma interação do usuário, mas as técnicas AJAX servem para muito mais coisas, continue pesquisando sobre o assunto e melhorando seus conhecimento.

Até o próximo artigo.

Artigos relacionados

AJAX - O Objeto XMLHttpRequest - Parte 4 : 17/04/2006
Como prometemos no artigo anterior vamos ver como, utilizando o mesmo...

AJAX - O Objeto XMLHttpRequest - Parte 3 : 12/03/2006
Como prometemos no artigo anterior veriamos uma aplicação prática para...

AJAX - O Objeto XMLHttpRequest - Parte 2 : 18/01/2006
Este é o segundo artigo da série e nele vamos conhecer mais a fundo o...

AJAX - O Objeto XMLHttpRequest - Parte 1 : 12/01/2006
Este é o primeiro artigo de uma série na qual estaremos explorando os...

.: Compras :.