Lstes de coix controlées par javascript et ajax

Fermé
zakri-04 Messages postés 21 Date d'inscription dimanche 15 novembre 2020 Statut Membre Dernière intervention 9 août 2023 - Modifié le 17 juin 2021 à 15:24
Pitet Messages postés 2826 Date d'inscription lundi 11 février 2013 Statut Membre Dernière intervention 21 juillet 2022 - 18 juin 2021 à 08:27
Bonjour,
Configuration: Windows / Firefox 89.0

J'ai créer un formulaire avec un bouton submit et un tableau qui contient une liste de choix qui se répète quatres fois dans toutes les lignes de ce tableau et qui a quatre valeurs obtenu d'aprés un tableau qui se nomme specialite (et il y a un autre tableau nommé choix_autorise qui nous n'intéresse pas il est utile juste pour avoir l'id specialité) voici le code pour mieux comprendre : 
<form method="post" action="Reserv_choix.php">
   <table>
   <tr>
  <th> N°</th>
  <th> Choix </th>
      </tr>
<?php
 for ($i=1; $i <5 ; $i++) { 
?>
  <tr>
            <td> <?php echo $i; ?> </td> 
   <td> <select> 
     <?php
      $requete = $bdd -> prepare ('SELECT id_Specialite_Autor FROM choix_autorise WHERE id_Specialite_Act = ?');
      $requete -> execute(array($_SESSION['id_specialit'])); 
      while ($donnees_req = $requete-> fetch()){
       $requete1 = $bdd -> prepare('SELECT design_Specialite FROM specialite WHERE id_Specialite = ?');
       $requete1 -> execute(array($donnees_req['id_Specialite_Autor']));
       $donnees1_req1 = $requete1-> fetch(); ?> 
        <option value="<?php echo $donnees1_req1['design_Specialite']; ?>"> <?php echo $donnees1_req1['design_Specialite']; ?> </option>
      <?php 
       } 
      ?> 
    </select> 
   </td>
  </tr>
  
<?php
 } 
?>
    </table>

donc on soustraire les id puis on les affecte leurs désignations et on les mettent dans la liste de chois qui se répète quatre fois dans la meme ligne du tableau

Mon problème et ce que je veux est que si l'utilisateur choisit une option de la première liste de choix il ne la trouve pas dans la deuxième et ainsi de suite
c-à-d il trouve quatre choix dans la première liste de choix et s'il choisit une valeur il trouve dans la deuxième liste de choix juste les troix autres choix et il trouve dans la troisième liste de choix juste les deux restants non choisies premièrement et deuxièmement et enfin il trouve dans la quatrième liste de choix juste une celle qui n'a pas été choisi dans les trois liste de choix précédante.
Merci de bien me répondre.
et je m'excuse pour ce trés long paragraphe.

2 réponses

Réponse 1 / 2
jordane45 Messages postés 38470 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 27 avril 2025 4 741
17 juin 2021 à 16:21
Bonjour

Tu utilises l'event change sur tes select
Et tu remove les options qui ont été choisies.
Mais en faisant ça tu ne pourras pas faire de nouveaux choix sans recharger 'a page
.
L'idéal serait, en effet, de charger le contenu de tes listes en ajax...

Reviens nous voir quand tu auras commencé quelque chose...
0
zakri-04 Messages postés 21 Date d'inscription dimanche 15 novembre 2020 Statut Membre Dernière intervention 9 août 2023 2
17 juin 2021 à 20:09
Merci Jordane,
oui c'est avec Ajax je vais essayer quelque choses et s'il y a des prblèmes je vais les exposer
0
Réponse 2 / 2
Pitet Messages postés 2826 Date d'inscription lundi 11 février 2013 Statut Membre Dernière intervention 21 juillet 2022 526
18 juin 2021 à 08:27
Bonjour,

Si les données dans les select sont toujours les mêmes et qu'il s'agit juste d'une question d'affichage, tu devrais pouvoir gérer tout ca directement en javascript sans avoir besoin de faire de requête ajax.

Un exemple en javascript (avec jQuery pour aller plus vite) : 
<select class="choices">
  <option value="">Choix 1 :</option>
  <option value="php">PHP</option>
  <option value="html">HTML</option>
  <option value="css">CSS</option>
  <option value="js">JS</option>
</select>

<select class="choices">
  <option value="">Choix 2 :</option>
  <option value="php">PHP</option>
  <option value="html">HTML</option>
  <option value="css">CSS</option>
  <option value="js">JS</option>
</select>

<select class="choices">
  <option value="">Choix 3 :</option>
  <option value="php">PHP</option>
  <option value="html">HTML</option>
  <option value="css">CSS</option>
  <option value="js">JS</option>
</select>

<select class="choices">
  <option value="">Choix 4 :</option>
  <option value="php">PHP</option>
  <option value="html">HTML</option>
  <option value="css">CSS</option>
  <option value="js">JS</option>
</select>

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="choices.js"></script>


// choices.js
var previous;

$('.choices').focus(function(){
	previous = this.value;
}).change(function(){
  if (previous) {
    $('.choices option[value="' + previous + '"]').css("display", "block");
  }
  
  if (this.value) {
  	$('.choices option[value="' + this.value + '"]').css("display", "none");
    previous = this.value;
  }
});
0

Discussions similaires

Javascript Arrondi à 2 chiffres après la virgule
jeremy -
gravityaerox -

12 réponses
java script error in the main process
ceciel2307 -
Thibaut -

3 réponses
javascript:void(0);
nano -
JCVD -

18 réponses
Faire un echo dans un script JS
CorentinRoche -
CorentinRoche -

6 réponses
probléme avec ajax svp
marwen109 -
Groarh -

4 réponses