Neste post vou tentar expor como criar dinamicamente elementos option dentro de um elemento select previamente escrito no seu HTML utilizando JQuery.
Antes de comecármos, é importante que você já tenha o JQuery adicionado ao seu fonte.
Após isso, vamos criar inicialmente um elemento select vazio dentro do corpo do HTML.
Para que o script funcione é necessário que ele esteja após todo o fonte, antes do final da tag body. Além de ser uma boa pratica pois, os elementos JS só serão executados após a renderização do HTML, previne que os scripts tentem executar ações sobre elementos ainda não criados.
Vamos criar primeiro uma função que crie um elemento option utilizand DOM.
É importante que esta função apenas crie um option vazio pois para o IE não funciona se o option for preenchido com valores de value e text e após inseridos no select.
Agora, o grande momento. Vamos adicionar este option, até o momento vazio, dentro no nosso select.
O que isso quer dizer?
Vamos separar este fonte.
Neste momento estamos chamando, via JQuery, o select que criamos anteriormente
Utilizando a função append do JQuery, é possível adicionar um elemento, neste caso o option.
Para não precisarmos escrever dentro do append o option, vamos fazer a chamada da nossa função, que executa a criação de um elemento option via DOM. Mais elegante que uma String :)
Acabou??? Ainda não! Lembra que este option está vazio? Pois é... É neste momento em que iremos adicionar os atributos de valor e configurar o texto que irá aparecer para o usuário. Para isso, utilizamos o attr e o text.
Simples assim :)
Nenhum comentário:
Postar um comentário