Pour une solution simple pure php à la "papa" et une petite touche de jQuery :
1 - construire la page en php côté serveur :
-Créer les selects themes et domaines en utilisant leur id dans la value de l'option
-Sélectionner toutes les lignes du tableau(avec l'id du theme et l'id du domaine associé à chaque enregistrement) pour créer le tableau en utilisant les identifiants des domaines et themes comme des class sur chaque ligne du tableau ou encore en utilisant les attributs de type "data-attribut" que permet le html5
2 - côté client il faut à chaque changement de valeur sur les selects agir sur les "class" :
Les valeurs sélectionnées dans les "<select>" correspondent aux "class" associées aux lignes que l'on veut voir affichée. Le principe est de masquer en utilisant la class "none" toutes les lignes puis de supprimer cette class "none" de toutes les lignes que l'on veut voir affichées...
illustration:
<!DOCTYPE html>
<!--
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
-->
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<style>
.none {
display: none;
}
</style>
</head>
<body>
<?php
// put your code here
?>
<span>
<label for="theme">Theme</label>
<select id="theme">
<option value="t1">Nature</option>
<option value="t2">Astronomie</option>
<option value="t3">Technologie</option>
</select>
</span>
<span>
<label for="domaine">Domaine</label>
<select id="domaine" >
<option value="" class='vide t1 t2 t3' selected></option>
<option value="d11" class='t1'>L'agriculture</option>
<option value="d12" class='t1'>L'écologie</option>
<option value="d14" class='t2'>Les étoiles</option>
<option value="d15" class='t2'>Les planêtes</option>
<option value="d16" class='t3'>Les voitures électriques</option>
<option value="d17" class='t3'>Les drones</option>
<option value="d18" class='t3'>Les smartphones</option>
</select>
</span>
<div id="tableau">
<table>
<tr>
<th>Référence</th>
<th>Titre</th>
<th>Auteur</th>
<th>Publication</th>
</tr>
<tr class="t1 d11"><td>11111</td><td>La culture du blé</td><td>Biscote</td><td>01/11/2002</td></tr>
<tr class="t1 d11"><td>11112</td><td>La culture des béteraves</td><td>Biscote</td><td>01/11/2002</td></tr>
<tr class="t1 d12"><td>11113</td><td>Les herbicide naturel</td><td>Biscote</td><td>01/11/2002</td></tr>
<tr class="t1 d12"><td>11114</td><td>Quest-ce que la culture bio</td><td>Biscote</td><td>01/11/2002</td></tr>
<tr class="t2 d14"><td>11115</td><td>Le soleil</td><td>Biscote</td><td>01/11/2002</td></tr>
<tr class="t2 d14"><td>11114</td><td>Les super mamie Nova</td><td>Biscote</td><td>01/11/2002</td></tr>
<tr class="t2 d15"><td>11115</td><td>Le soleil</td><td>Biscote</td><td>01/11/2002</td></tr>
<tr class="t2 d15"><td>11116</td><td>Le système solaire</td><td>Biscote</td><td>01/11/2002</td></tr>
</table>
</div>
<script>
$("#tableau tr").addClass("none");
$("#theme").on("change", function(){
theme=$(this).find("option").filter(":selected").attr("value");
//Suppression de la sélection
$("#domaine option").addClass("none");
$("#domaine option").removeAttr("selected");
//Sélection des domaines rattachés au theme sélectionné
$("#domaine option."+theme).removeClass("none");
$("#domaine option.vide").attr("selected","selected");
$("#domaine option.vide").removeClass("none");
selectLigne();
});
$("#domaine").on("change", function(){
selectLigne();
});
/*
* Sélection des lignes du tableau
*/
function selectLigne() {
theme=$("#theme").find("option").filter(":selected").attr("value");
domaine=$("#domaine").find("option").filter(":selected").attr("value");
//Suppression de la sélection
$("#tableau tr").addClass("none");
//Sélection des lignes rattachés au theme et domaine sélectionnés
sep="";
if (domaine!="") {
sep=".";
}
$("#tableau tr."+theme+sep+domaine).removeClass("none");
}
</script>
</body>
</html>
C'est une solution "rustique" à la portée de tout débutant en php et jQuery.
Je ne préconise pas de faire cela avec des gros volumes d'information mais 600 lignes c'est pas grand chose.
Bonne journée,
GJboba
Modifié par GJboba (25 Nov 2017 - 17:36)