Usamos cookies para medir audiência e melhorar sua experiência. Você pode aceitar ou recusar a qualquer momento. Veja sobre o iMasters.
Boa tarde pessoas,
Estou sentindo um pouco de dificuldade para adicionar a tag <option> dinamicamente com javaScript no meu select.... tentei alguns exemplos e n tive mto sucesso!
Como funcionaria?
**Ex 1 -> <select id = "itens">**
<select name="itens" id="itens">
<option value = "ITEM 1"> ITEM 1</option>
<option value = "ITEM 2"> ITEM 2</option>
</select>
Ao selecionar 1 das opções acima, seria inserido no select abaixo **options **com valores que correspondem aos itens acima dinamicamente.
**Ex 2 -> <select id ="objetos">**
<select name="itens" id="objetos">
<!-- Aqui ficaria os valores de acordo com o item selecionado acima -->
</select>
Por que preciso disso? Como penso em inserir os valores dos options do banco, seria interessante que ao selecionar ITEM 1, fosse adicionado no select abaixo informações do tipo **Objeto 1 do item 1**, **Objeto 2 do item 1 **e etc... adicionar ou remover um objeto de um item, ficaria a criterio do adm de conteúdo ou seja adicionando no banco apareceria, removendo do banco deixaria de ser exibido o objeto.Encontrei alguns links:
http://www.guj.com.br/java/274927-criar-option-dinamicamente-como
[http://www.electrictoolbox.com/jquery-add-option-select-jquery/](http://www.electrictoolbox.com/jquery-add-option-select-jquery/)
[http://www.electrictoolbox.com/javascript-add-options-html-select/](http://www.electrictoolbox.com/javascript-add-options-html-select/)Mas não consegui fazer funcionar... se alguem puder dar uma dica ou uma oriencao de estudo serei grato! \o
Espero q tenha conseguido deixar claro... caso eu consiga antes posto aqui. ABRAÇO ^~
Vlws pela força Henrique....
Mals a demora para conseguir responder... n estava conseguindo fazer com o modelo que vc sugeriu, mas seguindo a mesma linha consegui resolver, inseri alguns comentarios... espero que ajude outras pessoas:
//Script para ter acesso ao banco dinamicamente com ajax sem precisar de refresh na pag.
$(document).ready(function() {
//funcao ativada ao selecionar uma opcao de cursos, atraves do .change
$("select[name=cursos]").change(function(){
//informo atraves do select disciplinas q estou carregando um conteudo do banco
$("select[name=disciplinas]").html("<option value=''>Carregando...</option>");//Informo que estou aguardando alguma opção de disciplina ser selecionada para que possa ser exibido algo
$("select[name=assunto]").html("<option value=''>Aguardando Disciplina...</option>")
//acesso minha pag ajax, para fazer consulta no banco e exibir as disciplinas que correspondem ao curso
//selecionado. Entre chaves passo o valor do curso selecionado.
$.post("php/ajax-disciplinas.php",{cursos:$(this).val()},
//exibo na tag select disciplinas o valor gerado atraves da minha consulta -> php/ajax-disciplinas.php
function(valor){
$("select[name=disciplinas]").html(valor);
}
)
});//Seguindo o mesmo processo acima, ao selecionar a minha disciplina, carrego do banco asssuntos relacionados a ela.
$("select[name=disciplinas]").change(function(){
$("select[name=assunto]").html("<option vale=''>Carregando...</option>");function(valor){
$("select[name=assunto]").html(valor);
}
)
});
});ajax-assunto.php
<?php
/.... CONEXAO/
$disciplinas = $_POST["disciplinas"];
$sql = "SELECT a.* FROM disciplina d, assunto a, disciplina_has_assunto da WHERE d.id = $disciplinas AND da.assunto_id= a.id AND da.disciplina_id = d.id ORDER BY a.nome";
$result = pg_query($sql) or die ("Problema na consulta0");if(pg_num_rows($result) == 0){
echo '<option value="0">'.htmlentities('Aguardando Disciplina2').'</option>';}else{
echo '<option value="">Selecione marca...</option>';
while ($linhas = pg_fetch_array($result)) {
echo "<option value='".$linhas['id']."'>".$linhas['nome']."</option>";
}
}
?>ajax-disciplinas.php
<?php
/...CONEXAO/
//recebo o o valor da tag select cursos
$cursos = $_POST["cursos"];
$sql = "SELECT d.* FROM disciplina d, cursos c, cursos_has_disciplina cd WHERE c.id = $cursos AND cd.cursos_id=c.id AND cd.disciplina_id = d.id ORDER BY d.nome";
$result = pg_query($sql) or die ("Problema na consulta0");
//verifico quantidade de arquivos registrados no banco; echo '<option value="0">'.htmlentities('Aguardando Curso...').'</option>';}else{
echo '<option value="">Selecione Disciplina</option>';
while ($linhas = pg_fetch_array($result)) {
echo "<option value='".$linhas['id']."'>".$linhas['nome']."</option>";
}
}
?>É isso. srsrsrsr
abraço
:seta: http://www.daviferreira.com/posts/populando-selects-de-cidades-e-estados-com-ajax-php-e-jquery