Javascript - innerHTML not working with HTML select menus

Question

In my HTML page I have 2 select menus with IDs \"month\" and \"day\" - \"day\" is empty when the page loads, \"month\" has 12 options with values 1-12 corresponding to Janua

Answer 1

I would generalize and summarize as follows the issue and the solution that worked for me:

Problem:

Javascript innerHTML not working on select HTML elements any more.

Description:

The standard Javascript syntax to dinamically assign HTML contents (document.getElementById().innerHTML=...) does not work any more on the select HTML elements since an unknown version of (probably all) either operating systems or most used browsers; using it on a select element causes the browser to crash.

Solution:

To dinamically assign HTML contents to an HTML select element, instead of using the standard syntax:

document.getElementById(HTML_select_element_id).innerHTML = 

use this syntax:

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