Javascript – innerHTML non funziona con i menu di selezione HTML

Nella mia pagina HTML ho 2 menu di selezione con ID “mese” e “giorno” – “giorno” è vuoto quando la pagina viene caricata, “mese” ha 12 opzioni con valori 1-12 corrispondenti a gennaio – dicembre.

“month” ha un evento onchange che chiama questa funzione:

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 } 

(immagina solo che ci siano delle parentesi attorno ai tag delle opzioni per aiutarti a vedere …)

Penso che sia abbastanza chiaro vedere cosa sto cercando di ottenere … e tutto funziona bene a parte l’HTML interno del select con ID “day” non viene riempito affatto, indipendentemente da quale mese scegli. E so che il problema riguarda questo stadio della funzione, perché quando cambio il if, elseif e else code-to-be-execution in allarmi o qualcosa di simile, funziona perfettamente.

Qualcuno sa qual è il problema con innerHTML?

Grazie

EDIT: utilizzo di Firefox 3.6

Questo è un problema noto per IE.

Articolo KB con soluzione alternativa: http://support.microsoft.com/kb/276228

Inoltre: dupe di: innerHTML replace non riflette

EDIT: Ecco il mio esempio funzionante basato sul tuo codice:

    Selects       

Suggerirei semplicemente di non usare innerHTML su una select – sembra solo sbagliato. select elementi hanno metodi facili da usare per aggiungere nuove opzioni:

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

i parametri nella creazione dell’object sopra sono:

 new Option("optionText", "optionValue") 

Volevo solo aggiungere a questa risposta, perché potrebbe chiarire a qualcuno che arriva a questo post.

Non dovresti usare innerHTML per modificare i tag. Dovresti usare removeChild(element); e appendChild(element);

Per prima cosa si imposta la casella di selezione in una variabile per motivi di leggibilità e modifica;

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

Quindi si cancella la casella di selezione

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

Finalmente lo riempi di nuovo con i valori appropriati

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

Quindi alla fine con il tuo codice e il mio codice qui ottieni quanto segue:

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

Gli anni bisestili sono ora inclusi!

Questo è un po ‘un trucco, ma è minuscolo e funziona sia in FF che in IE come soluzione alternativa all’impossibilità di IE di modificare innerHTML su elementi selezionati.

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

un’altra soluzione è usare Jquery

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

Sono arrivato a questa domanda e volevo condividere il mio problema / risposta sperando che potesse aiutare gli altri.

Ho avuto questo che non ha funzionato:

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

L’ho cambiato a questo che ha funzionato:

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

Vorrei generalizzare e sintetizzare come segue il problema e la soluzione che ha funzionato per me:

Problema:

Javascript innerHTML non funziona più su elementi HTML selezionati.

Descrizione:

La syntax standard di Javascript per assegnare dynamicmente i contenuti HTML ( document.getElementById().innerHTML=... ) non funziona più sugli elementi HTML selezionati a partire da una versione sconosciuta di (probabilmente tutti) i sistemi operativi oi browser più utilizzati; utilizzarlo su un elemento select causa il crash del browser.

Soluzione:

Per assegnare dynamicmente i contenuti HTML a un elemento di selezione HTML, invece di utilizzare la syntax standard:

 document.getElementById(HTML_select_element_id).innerHTML =  

usa questa syntax:

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

Cosa ne pensi di questo: