Filtrer HTML par SELECT option

1 pièce(s) jointe(s)

comment faire pour afficher en HTML par catégorie et année? par SELECT Option
voici une partie du code HTML

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
<div class="right">
	 <div class="calendrier">
			<div id="calendrier-container">
	             <div id="calendrier-title">Calendrier</div>
				<div id="calendrier-trie">
				  <div class="filter filterNiv1">
				    <select name="maCategoryNiv1" id="maCategoryNiv1">
                      <option value="52">Toutes les cat&eacute;gories</option>
                      <option value="54" data-id="54">Culture</option>
                      <option value="55" data-id="55">Manifestation</option>
                      <option value="295" data-id="295">Réunions</option>
                      <option value="53" data-id="53">Sport</option>
                    </select>
				  </div>
					  <div class="filter filterNiv2">
					  <select name="maCategoryNiv2" id="maCategoryNiv2" disabled><option value="0" disabled>Toutes les cat&eacute;gories</option>
					  </select></div>
					  <div class="filter filterNiv3">
					  <select name="maMonth" id="maMonth">
					  <option value="0">Toute l'ann&eacute;e</option>
					  <option value="10" data-month='10' data-year='2017'>Octobre 2017</option>
					  <option value="11" data-month='11' data-year='2017'>Novembre 2017</option>
					  <option value="12" data-month='12' data-year='2017'>D&eacute;cembre 2017</option>
					  <option value="1" data-month='01' data-year='2018'>Janvier 2018</option>
					  <option value="2" data-month='02' data-year='2018'>F&eacute;vrier 2018</option>
					  <option value="3" data-month='03' data-year='2018'>Mars 2018</option>
					  <option value="4" data-month='04' data-year='2018'>Avril 2018</option>
					  <option value="5" data-month='05' data-year='2018'>Mai 2018</option>
					  <option value="6" data-month='06' data-year='2018'>Juin 2018</option>
					  <option value="7" data-month='07' data-year='2018'>Juillet 2018</option>
					  <option value="8" data-month='08' data-year='2018'>Aout 2018</option>
					  <option value="9" data-month='09' data-year='2018'>Septembre 2018</option>
					  </select></div>
			</div>
 
 
	<div id="calendrier-contenu-container">
	   <div id="calendrier-contenu">
 
          <div id="calendrier-contenu">
 
<!---------------------------------------premiere activité------------------------------------------------------>
 
							<div class="calendrier-element" data-month="03" data-year="2018">
								<div class="calendrier-date">
									<div class="calendrier-date-day">11</div>
									<div class="calendrier-date-month">mars.</div>
								</div>
 
 
								<div class="calendrier-element-title">
														<a href="../scripts/files/course/12Kms_Carrieres_2015_Categorie.pdf.pdf" target="_blank">12Kms DE CARRIERES SOUS POISSY</a>
								  </div>
 
								<div class="calendrier-element-description">Les 12Kms de Carrières sous Poissy se dérouleront sur le terrain du Peuple de l' herbe.</div>
							</div>
 
				<!-----------------------deuxieme activité----------------------------------------------->			
							<div class="calendrier-element" data-month="12" data-year="2017">
								<div class="calendrier-date">
									<div class="calendrier-date-day">8</div>
									<div class="calendrier-date-month">nov.</div>
								</div>
 
									<div class="calendrier-element-title">
															<a href="../scripts/files/spectacles/Sorties_Spectacles_2017-2018.pdf" target="_blank">Programme des spectacles</a></div>
 
									<div class="calendrier-element-description">Les spectacles proposés pour la saison 2017-2018.</div>
								  </div>
 
			<!--------------------------trisieme activité-------------------------------->		
 
									<div class="calendrier-element" data-month="12" data-year="2017">
														<div class="calendrier-date">
															<div class="calendrier-date-day">8</div>
															<div class="calendrier-date-month">dec.</div>
														</div>
 
													   <div class="calendrier-element-title"><a href="../scripts/files/loisirs/loto%20flep%20telethon%202017.jpg" target="_blank">LOTO</a></div>
 
													  <div class="calendrier-element-description">Un Loto sera organisé Salle Louis Armand Carrières sous Poissy.</div>
									  </div>
 
		<!------------------------------------quatrieme activité------------------------------------------------>			
 
								<div class="calendrier-element" data-month="12" data-year="2017">
												  <div class="calendrier-date">
														<div class="calendrier-date-day">8-9</div>
														<div class="calendrier-date-month">dec.</div>
													</div>
 
													<div class="calendrier-element-title">TELETHON</div>
 
													<div class="calendrier-element-description">Le Téléthon se déroulera Salle Louis Armand Carrières sous Poissy.</div>
								</div>
	  </div>
  </div>

tu ne peu faire que l'affichage en html donc le tri c'est pas envisageable.
peut être en javascript mais en html non. https://www.developpez.net/forums/d3.../trier-select/

merci mais comment faire en java?

Bonjour,

ce n'est pas java mais JavaScript.
Voir une solution (JavaScript sans Ajax) : ici

Code:

<div class="calendrier-element" data-month="03" data-year="2018">

On peut se servir des attributs data-xxx.
Par contre, on ne voit ici aucun attribut data-id qui permettrait de cibler par catégorie... :koi:

Voici donc un exemple de code (sans catégorie) : https://codepen.io/jreaux62/pen/vpXzWr

Code:

1
2
3
4
          <select name="maMonth" id="maMonth">
					  <option value="0">Toute l'ann&eacute;e</option>
					  <option value="10" data-month='10' data-year='2017'>Octobre 2017</option>
					  ......

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
function change_calendrier_elements() {
  // ---------
  // Month / Year
  var sel = document.getElementById("maMonth");
  var sel_month = sel.options[sel.selectedIndex].dataset.month; // on récupère le data-text de l'option sélectionnée...
  var sel_year = sel.options[sel.selectedIndex].dataset.year; // on récupère le data-text de l'option sélectionnée...
  // ---------
  // on parcours tous les '.calendrier-element'
  var calendar_elts = document.querySelectorAll(".calendrier-element");
  var calendar_elts_length = calendar_elts.length;
  // ---------
  for (i = 0; i < calendar_elts_length; ++i) {
    var div_month = calendar_elts[i].dataset.month; // on récupère le data-month de l'option sélectionnée...
    var div_year = calendar_elts[i].dataset.year; // on récupère le data-year de l'option sélectionnée...
    // on compare, et on affiche si ça correspond
    if (typeof sel_month != 'undefined' && typeof sel_year != 'undefined') {
      calendar_elts[i].style.display = (div_month == sel_month && div_year == sel_year) ? "block" : "none";
    }
  }
}
// ---------------------------
document.getElementById('maMonth').addEventListener('change', change_calendrier_elements);
// ---------------------------
// onload à l'ouverture de page
change_calendrier_elements();
// ---------------------------