我正在做一个网站，我遇到了以下问题：
我想显示不同年份（2017年和2018年）的月份列表，但网络浏览器仅显示两个选项中的其中一年的月份。
我做错了什么？
以下是代码：
function mostrarTablaTiempoReal() {
document.getElementById("tabla_tiempo_real").style.display = "block";
document.getElementById("tabla_historico").style.display = "none";
}
function mostrarTablaHistorico() {
document.getElementById("tabla_tiempo_real").style.display = "none";
document.getElementById("tabla_historico").style.display = "block";
}
function recuperarBotonTiempoReal() {
document.getElementById("boton_tiempo_real").style.cursor = "hand";
document.getElementById("boton_tiempo_real").style.opacity = 1;
}
function ocultarBotonTiempoReal() {
document.getElementById("boton_tiempo_real").style.cursor = "not-allowed";
document.getElementById("boton_tiempo_real").style.opacity = 0.6;
}
function bajarFichero() {
}
function subirFichero() {
}
function interpretarFichero() {
}
function crearFichero() {
}<style>
.canvas {
background-color: blue;
width: 100%;
height: auto;
}
.disabled {
opacity: 0.6;
cursor:not-allowed;
}
.boton-enlace:hover{
cursor:pointer; cursor: hand;
}
</style> <!DOCTYPE html>
<!--Idioma de la página-->
<html lang="es">
<!--Cabecera, contiene información sobre el documento-->
<head>
<!--Título de la página-->
<title>Ahorro</title>
<!--Tipo de caracteres que usamos-->
<meta charset="utf-8">
<!--Mobile-first-->
<meta name="viewport" content="width=device-width, initial-scale=1">
<!--Añadimos Bootstrap-->
<link rel="stylesheet"href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<!--Añadimos jQuery-->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!--Añadimos Popper JS-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
<!--Añadimos JavaScript-->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<!--Añadimos iconos de Google-->
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<!--Estilo personalizado para la página-->
<link rel="stylesheet" href="css/style.css">
<!--Fuentes personalizadas para la página-->
<link rel="stylesheet" href="css/font-awesome.css">
<style>
.canvas {
background-color: blue;
width: 100%;
height: auto;
}
.disabled {
opacity: 0.6;
cursor:not-allowed;
}
.boton-enlace:hover{
cursor:pointer; cursor: hand;
}
</style>
<!--Script con acciones propias-->
<script src="/elementos/acciones.js"></script>
</head>
<!--Cuerpo, contiene los elementos visibles del contenido de la página-->
<body style="background-image: url(/elementos/Fondo1.jpg);">
<div class="container-fluid" >
<!--Contenedor botones de la izquierda-->
<div class="col-sm-2" style="float: left; top:10px;">
<!--Botón para ir atrás (BOTÓN ATRÁS)-->
<a href="index.html">
<button style="button" class="btn btn-primary btn-lg btn-block">
<i class="material-icons" style="font-size: 22px; color:white; float: left;">arrow_back</i>
Atrás
</button>
</a>
<!--FIN BOTÓN ATRÁS-->
<br>
<!--Botón para mostrar los datos de tiempo real (BOTÓN TIEMPO REAL)-->
<button style="button" id="boton_tiempo_real" class="btn btn-primary btn-lg btn-block disabled" onclick="mostrarTablaTiempoReal(); ocultarBotonTiempoReal();">
<i class="material-icons" style="font-size: 22px; color:white;">timer</i>
Consumo<br>tiempo real
</button>
<!--FIN BOTÓN TIEMPO REAL-->
</div>
<!--FIN CONTENEDOR BOTONES IZQUIERDA-->
<!--Tabla del centro para datos tiempo real-->
<div class="col-sm-8" id="tabla_tiempo_real" style="float: left; top:100px; display: block;">
<div class="card mb-4">
<div class="card-block">
<h3 class="card-title">Datos de consumo</h3>
<h6 class="card-subtitle mb-2 text-muted">Datos en tiempo real</h6>
<hr/>
<div class="canvas-wrapper">
<canvas class="main-chart" id="bar-chart" height="157" width="472" style="width: 472px; height: 157px;">
</canvas>
</div>
</div>
</div>
</div>
<!--Tabla del centro para datos históricos-->
<div class="col-sm-8" id="tabla_historico" style="float: left; top:100px; display: none;">
<div class="card mb-4">
<div class="card-block">
<h3 class="card-title">Datos de consumo</h3>
<h6 class="card-subtitle mb-2 text-muted">Histórico</h6>
<hr/>
<div class="canvas-wrapper">
<canvas class="main-chart" id="bar-chart" height="157" width="472" style="width: 472px; height: 157px;">
</canvas>
</div>
</div>
</div>
</div>
<!--FIN TABLA CENTRO-->
<!--Botón que muestra el histórico de consumo (BOTÓN HISTÓRICO)-->
<div class="col-sm-2" style="float: right; top:100px;">
<div class="dropdown">
<button class="btn btn-primary btn-lg btn-block dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<i class="material-icons" style="font-size: 22px; color:white;">list</i>
Histórico
</button>
<div class="dropdown-menu" aria-labelledby="dropdownMenuButton" style="background-color: transparent; border: none;">
<!--Botón 2018-->
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton_2018" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
2018
</button>
<div class="dropdown-menu" aria-labelledby="dropdownMenuButton_2018">
<button class="dropdown-item boton-enlace" type="button" onclick="recuperarBotonTiempoReal(); mostrarTablaHistorico();">Enero</button>
<button class="dropdown-item boton-enlace" type="button" onclick="recuperarBotonTiempoReal(); mostrarTablaHistorico();">Febrero</button>
<button class="dropdown-item boton-enlace" type="button" onclick="recuperarBotonTiempoReal(); mostrarTablaHistorico();">Marzo</button>
<button class="dropdown-item boton-enlace" type="button" onclick="recuperarBotonTiempoReal(); mostrarTablaHistorico();">Abril</button>
<button class="dropdown-item boton-enlace" type="button" onclick="recuperarBotonTiempoReal(); mostrarTablaHistorico();">Mayo</button>
<button class="dropdown-item boton-enlace" type="button" onclick="recuperarBotonTiempoReal(); mostrarTablaHistorico();">Junio</button>
<button class="dropdown-item boton-enlace" type="button" onclick="recuperarBotonTiempoReal(); mostrarTablaHistorico();">Julio</button>
</div>
<!--FIN BOTÓN 2018-->
<!--Botón 2017-->
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton_2017" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
2017
</button>
<div class="dropdown-menu" aria-labelledby="dropdownMenuButton_2017">
<button class="dropdown-item boton-enlace" type="button" onclick="recuperarBotonTiempoReal(); mostrarTablaHistorico();">Enero</button>
<button class="dropdown-item boton-enlace" type="button" onclick="recuperarBotonTiempoReal(); mostrarTablaHistorico();">Febrero</button>
<button class="dropdown-item boton-enlace" type="button" onclick="recuperarBotonTiempoReal(); mostrarTablaHistorico();">Marzo</button>
<button class="dropdown-item boton-enlace" type="button" onclick="recuperarBotonTiempoReal(); mostrarTablaHistorico();">Abril</button>
<button class="dropdown-item boton-enlace" type="button" onclick="recuperarBotonTiempoReal(); mostrarTablaHistorico();">Mayo</button>
<button class="dropdown-item boton-enlace" type="button" onclick="recuperarBotonTiempoReal(); mostrarTablaHistorico();">Junio</button>
<button class="dropdown-item boton-enlace" type="button" onclick="recuperarBotonTiempoReal(); mostrarTablaHistorico();">Julio</button>
<button class="dropdown-item boton-enlace" type="button" onclick="recuperarBotonTiempoReal(); mostrarTablaHistorico();">Agosto</button>
<button class="dropdown-item boton-enlace" type="button" onclick="recuperarBotonTiempoReal(); mostrarTablaHistorico();">Septiembre</button>
<button class="dropdown-item boton-enlace" type="button" onclick="recuperarBotonTiempoReal(); mostrarTablaHistorico();">Octubre</button>
<button class="dropdown-item boton-enlace" type="button" onclick="recuperarBotonTiempoReal(); mostrarTablaHistorico();">Noviembre</button>
<button class="dropdown-item boton-enlace" type="button" onclick="recuperarBotonTiempoReal(); mostrarTablaHistorico();">Diciembre</button>
</div>
<!--FIN BOTÓN 2017-->
</div>
</div>
</div>
<!--FIN BOTÓN HISTÓRICO-->
</div>
</body>
</html>`enter code here`
PD：我附上两张显示网页浏览器的图片。
