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

Question

我有几个月的时间（一月到十二月）。选择月份时，它将显示该月份的 DIV。默认情况下，将显示当前月份和相应的 DIV。到目前为止，我可以默认在下拉菜单中显示当前月份，但我不知道为什么没有显示相应的DIV。Furthermore, when January is selected, the DIV displays, but then does not go away when another month is selected. 这只适用于 1 月份。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 + jQueryvar 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 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>

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 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>