Récupérer id Combobox pour afficher données dans une deuxième combobox

**salvilla1** · 31/08/2017, 16h35

D’abord bonjour a tout le monde, et m'excuser pour mon orthographie, je suis espagnol et mémé 3 ans après d'habiter ici j'ai un peu du mal avec cette belle langue

Je suis actuellement en stage après quelque mois de formation en développement (9 moi pour voir développement standardiste, web, mobile.., a mon avis pas assez mais bon), je me retrouve avec un petit problème qui me prends la tête depuis 2 jours et je commence a avoir plus de cheveux ..

J'ai com objectif créer deux combo-box, liées entre elles et remplies par une BDD MySQL en utilisant une requête..

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
<select id="filtreagence" method="post" onchange="recid()">
<?php 
 
 
$reponseagence = mysql_query("SELECT DISTINCT  agence FROM insee_bo_agence"); 
while ($donnees =  mysql_fetch_array($reponseagence))
{
?>
<option id="agencesbox" name="send" value="<?php echo $donnees['id'] ?>"><?php echo $donnees['agence'] ?></option>
 
   <?php
 
   }
 
   ?>
 
</select>

et la mon JS

Code :

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

1
2
3
4
5
$('#myCombo').change(function recid() {
	var id = $(this).find('option:selected').val();
	alert(id);  
 
});

Du coup je voudrais remplir la deuxième combo-box avec une autre requête mais avec les infos récupérés dans al première, en gros je dois choisir la région dans la première et la deuxième dois afficher les départements qui a dans cette région,
dans ma tête c’est clair, je dois récupérer la valeur de la première combo-box pour la transmettre dans la deuxième requête mais je sais pas comment faire, et tous les sites ou j'ai cherche j'ai rien compris.
Est ce que quelqu’un pourrait m’aider avec ce petit casse tête sil vous plait.
merci d’avance et je m’excuse si j'ai poste au mouvais endroit.

**badaze** · 01/09/2017, 23h58

Holà !

(non je ne parle pas Espagnol)

Il faut que tu utilises ajax. Je te propose un exemple en jquery.
Lors de la fin du chargement de la page la fonction combo_pays est appelée est remplit le combo "pays".
Lors d'un changement de valeur on appelle la fonction combo_ville qui appelle une page qui remplit le combo "ville" à partir de la valeur de combo "pays".
J'ai utilisé des tableaux pour simuler car je n'ai pas de tables sous la main. Mais avec mysql c'est seulement le principe d'accès aux données qui change.

Code html :

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
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
 
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
</style>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
<script>
function combo_pays() {
   var res    = Math.random();
   var param  = '&r='+res;
   $.ajax({
             url  : 'test9353_pays.php',
             type : 'POST',
             data : param, 
    dataType : 'html'
   }).done(function(html) {$("#pays").html(html);}) ;
}
function combo_ville(idPays) {
  
  $("#ville").html("");
  
  if (idPays != '0')
  {
   var res    = Math.random();
   var param  = '&idpays='+idPays;
   $.ajax({
             url  : 'test9353_ville.php',
             type : 'POST',
             data : param, 
    dataType : 'html'
   }).done(function(html) {$("#ville").html(html);}) ;
  }
}
 
</script>
</head>
<body>
Pays :
<select id="pays" onchange="combo_ville(this.value)">
</select>
<br/>
Ville :
<select id="ville">
</select>
<br/>
<script>
$(document).ready(combo_pays());
</script>
</body>
</html>

Fichier : test9353_pays.php
Simule la lecture de données. L'important est le print $code_html; qui renvoie les données à la page appelante.

Code php :

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

1
2
3
4
5
6
7
8
9
 
<?php
$array     = array('0'=>'Sélectionner un pays','1'=>'Allemagne','2'=>'Espagne','3'=>'France','4'=>'Italie');
$code_html = '';
foreach($array as $key => $nom_pays) 
{
 $code_html .= "<option value='$key'>$nom_pays</option>";
}
print $code_html;

Fichier : test9353_ville.php
Simule la lecture de données.

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
 
 
<?php
$array      = array();
// Allemagne
$array['1'] = array('1'=>'Aix la chapelle','2'=>'Bonn','3'=>'Berlin','4'=>'Francfort sur le Main','5'=>'Munich');
// Espagne
$array['2'] = array('1'=>'Barcelone','2'=>'Bilbao','3'=>'Madrid','4'=>'Séville','5'=>'Valladolid');
// France
$array['3'] = array('1'=>'Angers','2'=>'Bourg en Bresse','3'=>'Lyon','4'=>'Marseille','5'=>'Valencienne');
// Italie
$array['4'] = array('1'=>'Ancone','2'=>'Padoue','3'=>'Rome','4'=>'Venise','5'=>'Udine');
$code_html = '';
if (isset($_POST['idpays']))
{
 // paramètre passé
 $id_pays   = $_POST['idpays'];
 if (isset($array[$id_pays]))
 {
  foreach ($array[$id_pays] as $key => $nom_ville)
  {
   $code_html .= "<option value='$key'>$nom_ville</option>";
  }
 }
}
print $code_html;

**salvilla1** · 02/09/2017, 01h10

Merci de ta réponse, aujourd’hui pendant le stage j'ai vu des forums qui parlait de ça , demain je me mets avec ton code pour l'étudier et le comprendre, et une fois de plus merci!!

Je modifie ce message parce que peut être j'ai oublié quelque chose d'important, dans ma BDD il y a pas de ID's, du coup je suis obligé de faire les tries dans les requêtes :s est ce que ça suppose un problème pour utiliser AJAX ??

**badaze** · 02/09/2017, 09h31

Non. Tu peux faire comme suit. Par contre c'est plus propre avec des id.

Code php :

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

$code_html .= "<option value='$valeur_champ_table'>$valeur_champ_table</option>";

**salvilla1** · 02/09/2017, 11h13

j'ai copié collé ton code pour regarder comment il marche, mais les listes ne se remplissent pas :o c'est peut etre a cause de moi ?? sa ma choqué :s

**badaze** · 02/09/2017, 12h29

J'ai écrit ce code spécialement pour toi. Il fonctionne je l'ai testé avant de le poster.

Récupérer id Combobox pour afficher données dans une deuxième combobox

JavaScript

Vue hybride

Discussions similaires

Partager

Partager