Ir para conteúdo
Fórum Script Brasil
  • 0

(Resolvido) Criar options em uma combo usando DOM


Rafael Laurindo

Pergunta

Galera, olhem este código:

function create_monthOptions(form, objId)
         {
             if(form[objId].value == '')
             for (var i = 1; i <=12; i++)
             {
                 var option = document.createElement('option');
                 option.value = i;
                 option.text = i;    
                 form[objId].options.add(option);
             }
         }

Gostaria de saber, como fazer para deixar uma combo pura, sem options.

Editado por Rafael Laurindo
Link para o comentário
Compartilhar em outros sites

9 respostass a esta questão

Posts Recomendados

  • 0

Esse "options.add" funciona mesmo em todos os navegadores?

Estou perguntando porque nunca vi esse método, então seria interessante pesquisar sobre compatibilidade. Se quiser uma forma alternativa dá pra usar o appendChild.

Quanto a remover os elementos, uma forma simples é modificando o innerHTML:

elem.innerHTML=""
Mas há diversas formas de se fazer (seja buscando todos os options com o getElementsByTagName, dar um removeChild no primeiro filho até que não exista mais, etc.) Se quiser um exemplo:
while(elem.firstChild){
elem.removeChild(elem.firstChild)
}

Link para o comentário
Compartilhar em outros sites

  • 0

Não testei em outros, visto que faço as coisas sempre baseado no Netscape. Toda vez que alguém pergunta se funciona em todos, seria mais fácil perguntar, roda no IE? Pois só ele tem seus próprios padrões, o resto segue o Netscape, huhua, bricandeira ;). Mas quero o alternativo sim, sempre quererei. O appendChild, removeChild e firstChild só dão para ser usados em comboboxes? Ou daria para usar em tables também, e tudo que tiver "filho"?

Editado por Rafael Laurindo
Link para o comentário
Compartilhar em outros sites

  • 0

Bom, modifiquei, e ficou assim:

function create_monthOptions(id)
    {
        var el = document.getElementById(id);
        
        if(!el.firstChild)
        {
            for (var i = 1; i <= 12; i++)
            {
                option = document.createElement('option');
                option.value = i;
                option.text = i;
                el.appendChild(option); //coloca o option dentro do elemento do id informado
            }
        }
    }

Não consigo gerar direito. Se eu tirar o IF, ele não para de gerar. Gera de 1 à 12 concatenando, com os anteriormente criados, se eu deixa-lo assim, simplesmente não funciona.

Editado por Rafael Laurindo
Link para o comentário
Compartilhar em outros sites

  • 0

O objetivo seria somente incluir os options se estiver vazio, é isso ?

Talvez esteja ocorrendo um problema pelo fato de o primeiro elemento poder ser o texto (text node - nesse caso creio que ficaria em branco, mas existe). Tente, então, verificar se existe algum option (elem.getElementsByTagName("option")) ou procurar o segundo elemento (elem.firstChild.nextSibling)

Se funcionar posta aí !

Link para o comentário
Compartilhar em outros sites

  • 0

Aeeeeee! Hehehe!. Eu tava tentando só com o nextSibling, mas antes de verificar um irmão tem que verificar se existe pelo menos um filho. Isso aí Jonathan, sua teoria tava certa, parabéns. Resolvido. Mas gostaria de saber uma coisa que me intriga: por que não funcionaria havendo previamente um option? Seria por que exite a constante TEXT_NODE, ficando assim subentendido que existe algum filho? E por falar nisso, para que serve essas constantes?

function create_monthOptions(id)
    {
        var el = document.getElementById(id);
        
        if(!el.firstChild.nextSibling)
        {
            for (var i = 1; i <= 12; i++)
            {
                //somente cria, não adiciona
                option = document.createElement('option');
                option.value = i;
                option.text = i;
                //adiciona o option ao elemento do id informado
                el.appendChild(option); 
            }
        }
    }

Bom só testei desse jeito que fez mais sentido para mim.

Editado por Rafael Laurindo
Link para o comentário
Compartilhar em outros sites

  • 0

Rapaz, to bolado, acho que tem um bug no FF, eu coloquei um comentário entre as tags select /select e o ff as leu como um nó filho. Teste aew.

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Strict//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Insert title here</title>
<script>
	function create_monthOptions(id)
	{
		var el = document.getElementById(id);

		if(!el.firstChild.nextSibling)
		{
			for (var i = 1; i <= 12; i++)
			{
				//somente cria, não adiciona, ainda
				option = document.createElement('option');
				option.value = i;
				option.text = i;
				//adiciona o option ao elemento do id informado
				el.appendChild(option);
			}
		}
	}


</script>
</head>
<body onload="">
<form>
	<select id="cbMes" onclick="createOptionMonth(this.id)" >
	<!--<option value="teste">oi</option>-->
	</select>
</form>
</body>
</html>

Editado por Rafael Laurindo
Link para o comentário
Compartilhar em outros sites

Participe da discussão

Você pode postar agora e se registrar depois. Se você já tem uma conta, acesse agora para postar com sua conta.

Visitante
Responder esta pergunta...

×   Você colou conteúdo com formatação.   Remover formatação

  Apenas 75 emoticons são permitidos.

×   Seu link foi incorporado automaticamente.   Exibir como um link em vez disso

×   Seu conteúdo anterior foi restaurado.   Limpar Editor

×   Você não pode colar imagens diretamente. Carregar ou inserir imagens do URL.



  • Estatísticas dos Fóruns

    • Tópicos
      152,3k
    • Posts
      652,5k
×
×
  • Criar Novo...