Estoy tratando de cargar las option de un select al presionar un botón.
El código funciona si dichas etiquetas no están contenidas dentro de un form; en caso contrario, los datos se cargan pero instantáneamente vuelven a desaparecer:
<!DOCTYPE html>
<html>
<head>
<script>
window.onload = function ()
{
var selectElement = document.getElementsByTagName("select")[0];
var boton = document.getElementsByTagName("button")[0];
boton.onclick = function ()
{
selectElement.innerHTML = "";
for (var i = 1; i <= 31; ++i)
selectElement.innerHTML += ("<option>" + i + "</option>");
}
}
</script>
</head>
<body>
<form>
<select name="numeros"></select>
<br/>
<button>Cargar</button>
</form>
</body>
</html>
¿A qué se debe este comportamiento?
¿Cómo puedo corregirlo?
Muchísimas gracias.