从月份下拉选项中显示当前月份的 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 + 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 i = 0;也是初始显示。var CurrentDate=new Date();$("#month").val(CurrentDate.getMonth());document.getElementById(new Date().getMonth()).style.display = 'block';document.getElementById('month').onchange = function() {&nbsp; &nbsp; var i = 0;&nbsp; &nbsp; var myDiv = document.getElementById(i);&nbsp; &nbsp; while(myDiv) {&nbsp; &nbsp; &nbsp; &nbsp; myDiv.style.display = 'none';&nbsp; &nbsp; &nbsp; &nbsp; myDiv = document.getElementById(++i);&nbsp; &nbsp; }&nbsp; &nbsp; document.getElementById(this.value).style.display = 'block';};.hide {&nbsp; &nbsp; display: none;&nbsp; &nbsp;}&nbsp;<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><select name="month" id="month">&nbsp; <option value="0">January</option>&nbsp; <option value="1">February</option>&nbsp; <option value="2">March</option>&nbsp; <option value="3">April</option>&nbsp; <option value="4">May</option>&nbsp; <option value="5">June</option>&nbsp; <option value="6">July</option>&nbsp; <option value="7">August</option>&nbsp; <option value="8">September</option>&nbsp; <option value="9">October</option>&nbsp; <option value="10">November</option>&nbsp; <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() {&nbsp; &nbsp; var i = 0;&nbsp; &nbsp; var myDiv = document.getElementById(i);&nbsp; &nbsp; while(myDiv) {&nbsp; &nbsp; &nbsp; &nbsp; myDiv.style.display = 'none';&nbsp; &nbsp; &nbsp; &nbsp; myDiv = document.getElementById(++i);&nbsp; &nbsp; }&nbsp; &nbsp; 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() {&nbsp; &nbsp; var i = 1;&nbsp; &nbsp; var myDiv = document.getElementById(i);&nbsp; &nbsp; while(myDiv) {&nbsp; &nbsp; &nbsp; &nbsp; myDiv.style.display = 'none';&nbsp; &nbsp; &nbsp; &nbsp; myDiv = document.getElementById(++i);&nbsp; &nbsp; }&nbsp; &nbsp; document.getElementById(this.value).style.display = 'block';};.hide {&nbsp; &nbsp; display: none;&nbsp; &nbsp;}&nbsp;<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><select name="month" id="month">&nbsp; <option value="0">January</option>&nbsp; <option value="1">February</option>&nbsp; <option value="2">March</option>&nbsp; <option value="3">April</option>&nbsp; <option value="4">May</option>&nbsp; <option value="5">June</option>&nbsp; <option value="6">July</option>&nbsp; <option value="7">August</option>&nbsp; <option value="8">September</option>&nbsp; <option value="9">October</option>&nbsp; <option value="10">November</option>&nbsp; <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>