时间戳

首页 > 解决方案 > 从月份下拉选项中显示当前月份的 DIV

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

问题描述

我有几个月的时间（一月到十二月）。选择月份时，它将显示该月份的 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/

谢谢！

标签： javascripthtmljquerycss

解决方案

你没有显示当月的内容，看看这个可能对你有帮助。

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>

推荐阅读