Javascript – innerHTML não funciona com menus de seleção de HTML

Na minha página HTML eu tenho 2 menus de seleção com IDs “mês” e “dia” – “dia” está vazio quando a página carrega, “mês” tem 12 opções com valores 1-12 correspondentes a janeiro – dezembro.

“mês” tem um evento onchange que chama essa function:

function showOutboundDays(month) { if(month==4 || month==6 || month==9 || month==11) document.getElementById('day').innerHTML='12'; etc. up to 30 else if(month==2) document.getElementById('day').innerHTML='1'; etc. up to 28 else document.getElementById('day').innerHTML='1'; etc. up to 31 } 

(imagine que há chaves em torno das tags de opção para ajudar você a ver …)

Eu acho que está bem claro para ver o que eu estou tentando alcançar … e tudo funciona bem, exceto que o innerHTML do select com o ID “day” não é preenchido, independente do mês que você escolher. E eu sei que o problema é com este estágio da function, porque quando eu mudo o if, elseif e outro código a ser executado para alertas ou algo similar, ele funciona bem.

Alguém sabe qual é o problema com o innerHTML?

obrigado

EDIT: Usando o Firefox 3.6

Esse é um problema conhecido do IE.

Artigo da KB com solução alternativa: http://support.microsoft.com/kb/276228

Também: dupe de: innerHTML replace não reflete

EDIT: aqui é minha amostra de trabalho com base no seu código:

    Selects       

Eu sugeriria simplesmente não usar innerHTML em um select – isso simplesmente parece errado. select elements possuem methods fáceis de usar para adicionar novas opções:

 `document.getElementById('day').options.add(new Option("1", "1"))` 

os parâmetros na criação do object acima são:

 new Option("optionText", "optionValue") 

Só queria adicionar a esta resposta, porque poderia esclarecer a alguém que chegar a este post.

Você não deve usar innerHTML para modificar tags. Você deve estar usando removeChild(element); e appendChild(element);

Primeiro você define sua checkbox de seleção em uma variável para fins de legibilidade e edição;

 var select = document.getElementById('days'); 

Então você desmarca a checkbox de seleção

 while ( select.childNodes.length >= 1 ) { select.removeChild(select.firstChild); } 

Finalmente, você preenche-o novamente com os valores apropriados

 for(var i=1;i<=days;i++) { newOption = document.createElement('option'); newOption.value=i; newOption.text=i; select.appendChild(newOption); } 

Então, no final, com seu código e meu código, você obtém o seguinte:

 function showOutboundDays(month, year) { var days=null; if(month==4 || month==6 || month==9 || month==11) days=30; else if(month==2) { //Do not forget leap years!!! if(year % 400 == 0 || (year % 4 == 0 && year % 100 != 0)) //Provided by Justin Gregoire { days=29; } else { days=28; } } else days=31; var select = document.getElementById('days'); while ( select.childNodes.length >= 1 ) { select.removeChild(select.firstChild); } for(var i=1;i<=days;i++) { newOption = document.createElement('option'); newOption.value=i; newOption.text=i; select.appendChild(newOption); } } 

Os anos bissextos estão agora incluídos!

Isso é um pouco complicado, mas é pequeno e funciona tanto no FF quanto no IE como uma solução para a incapacidade do IE de alterar o innerHTML em elementos selecionados.

 function swapInnerHTML(objID,newHTML) { var el=document.getElementById(objID); el.outerHTML=el.outerHTML.replace(el.innerHTML+'',newHTML+''); } 

Outra solução é usar o Jquery

$('#day').html('');

Eu cheguei a esta questão e queria compartilhar o meu problema / resposta, esperando que isso possa ajudar os outros.

Eu tive isso que não funcionou:

 function change_select() { var sel = document.getElementById('my-id').innerHTML; sel = ''; } 

Eu mudei para isso que funcionou:

 function change_select() { var sel = document.getElementById('my-id'); sel.innerHTML = 'option>new item'; } 

Eu generalizaria e resumiria da seguinte maneira a questão e a solução que funcionou para mim:

Problema:

Javascript innerHTML não funciona mais em elementos HTML selecionados.

Descrição:

A syntax JavaScript padrão para atribuir dinamicamente o conteúdo HTML ( document.getElementById().innerHTML=... ) não funciona mais nos elementos HTML selecionados , pois uma versão desconhecida (provavelmente todos) dos sistemas operacionais ou dos navegadores mais usados; usá-lo em um elemento select faz com que o navegador trave.

Solução:

Para atribuir dinamicamente o conteúdo HTML a um elemento HTML select , em vez de usar a syntax padrão:

 document.getElementById(HTML_select_element_id).innerHTML =  

use esta syntax:

 var select = document.getElementById(HTML_select_element_id); select.outerHTML = select.outerHTML.replace( select.innerHTML ,  ) ; 

Que tal agora:

 
Intereting Posts