从月份下拉选项中显示当前月份的 DIV

Question

I have a drop down of months (January to December). When selecting a month, it would display a DIV for that month. By default , the current month and the corresponding DIV would be displayed .

So far, I am able to display the current month in the drop down by default, but I don't know why the corresponding DIV is not displayed.

Furthermore, when January is selected, the DIV displays, but then does not go away when another month is selected. This is only the case for the month of January.

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

Demo: https://jsfiddle.net/mp61hbno/

Thank you!

Answer 1

I think you were really close. Have a look at the code below. I modified a few things.

Specifically var i = 0; and also the initial display.

 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>

Answer 2

You were not showing the content of current month, see this which might help you.

 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 3

I have made few changes to you js code, try this

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

It will solve the issue.