(Resolvido) Criar options em uma combo usando DOM

[Rafael Laurindo]

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 Fevereiro 7, 2010 por Rafael Laurindo

[Jonathan Queiroz]

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)
}

[Rafael Laurindo]

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 Fevereiro 4, 2010 por Rafael Laurindo

[Jonathan Queiroz]

IE é um lixo mesmo...

Quanto a esses métodos, podem ser utilizados em qualquer elemento.

[Rafael Laurindo]

Obrigado, vo fazer os testes aqui e postarei qualquer coisa. Abração.

[Rafael Laurindo]

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 Fevereiro 7, 2010 por Rafael Laurindo

[Rafael Laurindo]

Galera, me perdoe, mas eu preciso de uma resposta, pois a lógica pra mim está certa. O código pessado pelo Jonathan funciona

while(elem.firstChild){

elem.removeChild(elem.firstChild)

}

, mas em um if, como acima não.

[Jonathan Queiroz]

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í !

[Rafael Laurindo]

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 Fevereiro 7, 2010 por Rafael Laurindo

[Rafael Laurindo]

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 Fevereiro 7, 2010 por Rafael Laurindo