Отображение DIV для текущего месяца из вариантов раскрывающегося списка месяцев

Question

У меня есть выпадающий список месяцев (с января по декабрь). При выборе месяца для этого месяца будет отображаться DIV. По по умолчанию , текущий месяц и соответствующий DIV будут отображаться .

Пока что я могу отображать текущий месяц в раскрывающемся списке по умолчанию, но я не знаю, почему соответствующий DIV не отображается.

Кроме того, когда выбрано Январь , отображается DIV, но затем go не исчезает при выборе другого месяца . Это справедливо только для января.

HTML

<select name="month" id="month">
  <option value="0">January</option>
  <option value="1">February</option>
  <option value="2">March</option>
  <option value="3">April</option>
  <option value="4">May</option>
  <option value="5">June</option>
  <option value="6">July</option>
  <option value="7">August</option>
  <option value="8">September</option>
  <option value="9">October</option>
  <option value="10">November</option>
  <option value="11">December</option>
</select>

<div class="hide" id="0">Jan content</div>
<div class="hide" id="1">Feb content</div>
<div class="hide" id="2">Mar content</div>
<div class="hide" id="3">Apr content</div>
<div class="hide" id="4">May content</div>
<div class="hide" id="5">Jun content</div>
<div class="hide" id="6">Jul content</div>
<div class="hide" id="7">Aug content</div>
<div class="hide" id="8">Sept content</div>
<div class="hide" id="9">Oct content</div>
<div class="hide" id="10">Nov content</div>
<div class="hide" id="11">Dec content</div>

CSS

.hide {
    display: none;   
}  

JavaScript + jQuery

var CurrentDate=new Date();
$("#month").val(CurrentDate.getMonth());

document.getElementById('month').onchange = function() {
    var i = 1;
    var myDiv = document.getElementById(i);
    while(myDiv) {
        myDiv.style.display = 'none';
        myDiv = document.getElementById(++i);
    }
    document.getElementById(this.value).style.display = 'block';
};

Демо: https://jsfiddle.net/mp61hbno/

Спасибо!

Answer 1

Вы не показывали содержимое текущего месяца, посмотрите, что может вам помочь.

var CurrentDate=new Date();
var curMonth = CurrentDate.getMonth();
document.getElementById(curMonth).style.display = 'block';
$("#month").val(CurrentDate.getMonth());


document.getElementById('month').onchange = function() {
    var i = 1;
    var myDiv = document.getElementById(i);
    while(myDiv) {
        myDiv.style.display = 'none';
        myDiv = document.getElementById(++i);
    }
    document.getElementById(this.value).style.display = 'block';
};

.hide {
    display: none;   
} 

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select name="month" id="month">
  <option value="0">January</option>
  <option value="1">February</option>
  <option value="2">March</option>
  <option value="3">April</option>
  <option value="4">May</option>
  <option value="5">June</option>
  <option value="6">July</option>
  <option value="7">August</option>
  <option value="8">September</option>
  <option value="9">October</option>
  <option value="10">November</option>
  <option value="11">December</option>
</select>

<div class="hide" id="0">Jan content</div>
<div class="hide" id="1">Feb content</div>
<div class="hide" id="2">Mar content</div>
<div class="hide" id="3">Apr content</div>
<div class="hide" id="4">May content</div>
<div class="hide" id="5">Jun content</div>
<div class="hide" id="6">Jul content</div>
<div class="hide" id="7">Aug content</div>
<div class="hide" id="8">Sept content</div>
<div class="hide" id="9">Oct content</div>
<div class="hide" id="10">Nov content</div>
<div class="hide" id="11">Dec content</div>

Answer 2

Я внес несколько изменений в ваш код js, попробуйте этот

var CurrentDate=new Date();
var curMnth = CurrentDate.getMonth();
$("#month").val(curMnth);
$("#"+curMnth).show();

document.getElementById('month').onchange = function() {
    var i = 0;
    var myDiv = document.getElementById(i);
    while(myDiv) {
        myDiv.style.display = 'none';
        myDiv = document.getElementById(++i);
    }
    document.getElementById(this.value).style.display = 'block';
};

Это решит проблему.

Answer 3

Я думаю, вы были действительно близки. Взгляните на приведенный ниже код. Я изменил несколько вещей.

Конкретно var i = 0;, а также начальное отображение.

var CurrentDate=new Date();
$("#month").val(CurrentDate.getMonth());
document.getElementById(new Date().getMonth()).style.display = 'block';

document.getElementById('month').onchange = function() {
    var i = 0;
    var myDiv = document.getElementById(i);
    while(myDiv) {
        myDiv.style.display = 'none';
        myDiv = document.getElementById(++i);
    }
    document.getElementById(this.value).style.display = 'block';
};

.hide {
    display: none;   
} 

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select name="month" id="month">
  <option value="0">January</option>
  <option value="1">February</option>
  <option value="2">March</option>
  <option value="3">April</option>
  <option value="4">May</option>
  <option value="5">June</option>
  <option value="6">July</option>
  <option value="7">August</option>
  <option value="8">September</option>
  <option value="9">October</option>
  <option value="10">November</option>
  <option value="11">December</option>
</select>

<div class="hide" id="0">Jan content</div>
<div class="hide" id="1">Feb content</div>
<div class="hide" id="2">Mar content</div>
<div class="hide" id="3">Apr content</div>
<div class="hide" id="4">May content</div>
<div class="hide" id="5">Jun content</div>
<div class="hide" id="6">Jul content</div>
<div class="hide" id="7">Aug content</div>
<div class="hide" id="8">Sept content</div>
<div class="hide" id="9">Oct content</div>
<div class="hide" id="10">Nov content</div>
<div class="hide" id="11">Dec content</div>