Discussion :

[NousSommesEnPLS]

Bonjour,

Nous sommes débutants en AJAX et nous avons un problème. Nous avons un <table> avec des <select> et nous aimerions mettre à jour ces <select> avec AJAX. Lorsqu'une valeur est sélectionnée dans un <select>, elle doit être retirée dans tous les autres <select> de la même ligne et de la même colonne du <table>. Tout cela, pour n'importe quel <select>. Nous avons un début de code qui fonctionne uniquement pour la première case.
Sur l'image, le résultat qu'on a obtenu.

Merci

Voici notre script AJAX actuel :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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
    $("select").click(function(){
 
      $.ajax({
                     url : 'test.php',
                     type : 'POST',
                     data : {select: $('#select0').val(),
                            grp: $('#allgrp').val()},
                     dataType : 'html',
                     success : function(code_html, statut){
                       for(var i=1; i<$('select').length;++i){
                         if(i%($('select').length/($('th').length-1))  == 0){
                           $("#select"+i).empty();
                           $(code_html).appendTo("#select"+i);
                         }
                        }
 
                        for(var j=1; j<$('th').length;j++){
                          $("#select"+j).empty();
                          $(code_html).appendTo("#select"+j);
                        }
                     },
 
                     error : function(resultat, statut, erreur){
                       alert(resultat);
                     },
 
 
                   });
 
 
 
    });

fichier test.php :

Code php :

Sélectionner tout - Visualiser dans une fenêtre à part

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
<?php
$selected = $_POST['select'];
// echo "<p>".$selected."</p>";
 
include '../Interactions/Connexion.php';
 
$db = connect_database();
$all_grp = array();
try{
  $stmt = $db->prepare("SELECT NumGroupe FROM GROUPE where NumGroupe != 0");
  $stmt->execute();
  while($row = $stmt->fetch()){
    array_push($all_grp,$row['NumGroupe']);
  }
}
catch(Exception $e){}
 
for($i=0; $i<sizeof($all_grp)+1; $i++) {
  if($all_grp[$i] == $selected){
    unset($all_grp[$i]);
  }
  //echo "<p>".$all_grp[$i]."</p>";
}
 
echo "<option value='none'></option>";
  foreach ($all_grp as $num) {
    echo "<option value='".$num."'>Groupe ".$num."</option>";
  }
 
?>

[headmax]

Salut, je ne suis pas sur que event Click sont adapté a ce cas de figure j'aurais plutôt utilisé un event Change comme ceci suffirait :
Je part du SELECT celui qui CHANGE d'état par déclenchement de l'événement change et je recule de deux parents TD vers TR à partir de TR on peux aussi faire $(this).parents('tr'), je cherche find() les SELECT de cette ligne (TR) et je désélectionne les options find('option').. de tout les selects sauf celui en cours d'utilisation .not("#"+$(this).attr('id')) en lui passant sont id mais j'aurais pu aussi passer l'object .not($(this)). Voilà j'espère que c'est clair pour toi.

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
 
$(document).ready(function(){
     $("select").change(function(){
       //avant l'ajax ou dans le success d'ajax //select -> td -> tr -> findall -> selects
       var allLineSelect = $(this).parent().parent().find('select').not("#"+$(this).attr('id')); 
        //ou
        //var allLineSelect = $(this).parents('tr').find('select').not("#"+$(this).attr('id')); 
       allLineSelect.find('option').prop("selected", false);
     });
});

démo :
https://codepen.io/headmax/pen/KZrOYN?editors=0011