1
votes

Afficher DIV pour le mois en cours à partir des options de liste déroulante des mois

J'ai un menu déroulant des mois (janvier à décembre). Lors de la sélection d'un mois, il afficherait un DIV pour ce mois. Par défaut , le mois en cours et le DIV correspondant seraient affichés .

Jusqu'à présent, je suis en mesure d'afficher le mois en cours dans le menu déroulant par défaut, mais Je ne sais pas pourquoi la DIV correspondante n'est pas affichée.

De plus, lorsque Janvier est sélectionné, la DIV s'affiche, mais ne disparaît pas lorsqu'un autre mois est sélectionné. Ce n'est le cas que pour le mois de janvier.

HTML

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

CSS

.hide {
    display: none;   
}

JavaScript + jQuery

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

Démo: https://jsfiddle.net/mp61hbno/

Merci!

javascript jquery html css

1 commentaires

Juste un commentaire, mais HTML 4 et ci-dessous ne prennent pas en charge les identifiants commençant par des chiffres. Cela peut ne pas fonctionner sur les anciens navigateurs. La spécification HTML 5 ouvre cela.

3 Réponses :

0
votes

Je pense que vous étiez vraiment proche. Jetez un œil au code ci-dessous. J'ai modifié quelques choses.

Plus précisément var i = 0; et également l'affichage initial.

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

.hide {
    display: none;   
}

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

1 commentaires

Ravi de l'entendre. Bonne chance.

0
votes

Vous ne montriez pas le contenu du mois en cours, voyez ceci qui pourrait vous aider.

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

.hide {
    display: none;   
}

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

0 commentaires

0
votes

J'ai apporté quelques modifications à votre code js, essayez ceci

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

Cela résoudra le problème.

0 commentaires