Lstes de coix controlées par javascript et ajax

zakri-04 Messages postés 21 Date d'inscription   Statut Membre Dernière intervention   -  
Pitet Messages postés 2826 Date d'inscription   Statut Membre Dernière intervention   -
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 38486 Date d'inscription   Statut Modérateur Dernière intervention   4 752
 
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   Statut Membre Dernière intervention   2
 
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   Statut Membre Dernière intervention   527
 
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

java script error in the main process
ceciel2307 -
Thibaut -

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

4 réponses
Javascript Arrondi à 2 chiffres après la virgule
jeremy -
gravityaerox -

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

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

6 réponses