[英]Display DIV for current month from months dropdown options
我有幾個月的時間(一月到十二月)。 選擇月份時,它將顯示該月份的 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/
謝謝!
我想你真的很親近。 看看下面的代碼。 我修改了一些東西。
特別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>
你沒有顯示當月的內容,看看這個可能對你有幫助。
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>
我對你的 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';
};
它將解決問題。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.