Deuxième select dynamique

**fazpedro** · 05/06/2012, 15h39

Bonjour,

je sais que ce sujet a déjà été traité plusieurs fois, mais je n'arrive pas à l'adapter à mon code...
=> BUT : lier un deuxième <select> à la réponse au premier <select>
merci d'avance de votre aide.

mon formulaire :

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
<form action="" method="post">
<fieldset>
<table CELLSPACING="5" BORDER="0" CELLPADDING="5">
<tr>
<td align="right">Secteur : </td>
<td>
<select name="num_salle" id="secteur" tabindex="1" onchange="liste();">
<option value="Tous"> Tous </option>
<?php
mysql_query("SET NAMES utf8");
$affiche_secteur = "SELECT secteur_geographique FROM secteur ORDER BY secteur_geographique ASC" ;
$resultat_secteur = mysql_query($affiche_secteur) or die ('Erreur : '.mysql_error() );
if      (mysql_num_rows($resultat_secteur) == 0)        //On vérifie que la table contient quelque chose
{       echo '<option>Aucun</option>';  }
else
        {       while ( $list_secteur = mysql_fetch_array( $resultat_secteur ) )
                {       echo '<option value="'.$list_secteur['secteur_geographique'].'">'.$list_secteur['secteur_geographique'].'</option>';    }
        }
?>
</select>
</td>
</tr>
<tr>
<td align="right">Nom : </td>
<td>
<select id="conteneur" name="nom2" tabindex="2" ></select>
</td>
</tr>
</table>
</fieldset>
</form>

le java :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
<script type="text/javascript">
function liste()
	{
		var elem = document.getElementById("conteneur");
		var secteur = $(":select[name=num_salle]").value();
		$.post('test_select_lieu.php',
			{	secteur: num_salle	},
		function(data)	{
			elem.style.display='inline';
			$('#conteneur').html(data);
			});
    }
</script>

et le code de la requête "test_select_lieu.php" :

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
<?php session_start();
require ('configuration.php');
$sql = connect_sql();
?>
<?php
$secteur_post_recup=mysql_real_escape_string($_POST['num_salle']);
mysql_query("SET NAMES utf8");
$affiche_nom = "SELECT * FROM lieu WHERE secteur ='$secteur_post_recup' ORDER BY nom ASC";
$resultat_nom = mysql_query($affiche_nom) or die ('Erreur : '.mysql_error() );
if      (mysql_num_rows($resultat_nom) == 0)
{       echo '<option>Aucun</option>';  }
else
        {       while ( $list_nom = mysql_fetch_array( $resultat_nom ) )
                {       echo '<option value="'.$list_nom['nom'].'">'.stripslashes($list_nom['nom']).'</option>';        }
        }
?>

**kopax** · 05/06/2012, 22h48

Ton javascript

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
 
function list(){
	var secteur = $(":select[name=num_salle]").value();
	$.ajax({
	  url: "test_select_lieu.php?secteur=" + secteur,
	  dataType: 'jsonp',
	  type: "GET",
	  success: function(json){
		appendResult(json);
	  }
	});
}
function appendResult(json){
  var elem = document.getElementById("conteneur");
  var html = '';
  for(var i = 0; i < json.length; i++){
    html += "<option value="+json[i]+">";
    html += json[i];
    html += "</option>";
  }
  $(elem).html(html);
 
}

Ta page ajax

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
 
<?php
session_start();
header('content-type: application/json; charset=utf-8');
require ('configuration.php');
$sql = connect_sql();
 
if(isset($_GET['secteur'])){
 
mysql_query("SET NAMES utf8");
 
$affiche_nom = "SELECT nom FROM lieu WHERE secteur='".$_GET['secteur']."' ORDER BY nom ASC";
 
$req = mysql_query($affiche_nom) or die('erreur requete');
 
$cpt = 0;
while($data = mysql_fetch_assoc($req)){
  $result[$cpt] = $data['nom'];
  cpt++;
}
$json = json_encore($result);
 
        echo isset($_GET['callback'])
            ? "{$_GET['callback']}($json)"
            : $json;
}
else{
 echo 'nothing to do here';
}
?>

**fazpedro** · 06/06/2012, 10h18

Bonjour,
j'ai modifié mais rien ne se passe quand je sélectionne le premier select, le deuxième reste vide...

test_select.php :

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
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
<?php session_start();
require ('configuration.php');
$sql = connect_sql();
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />	
<meta name="robots" content="noindex, nofollow" />
<?php include('scripts.php'); ?><!-- insère les scripts jquery -->
<script type="text/javascript">
function list(){
	var secteur = $(":select[name=num_salle]").value();
	$.ajax({
		url: "test_select_lieu.php?secteur=" + secteur,
		dataType: 'jsonp',
		type: "GET",
		success: function(json){	appendResult(json);		}
		});
	}
function appendResult(json){
	var elem = document.getElementById("conteneur");
	var html = '';
		for(var i = 0; i < json.length; i++){
			html += "<option value="+json[i]+">";
			html += json[i];
			html += "</option>";	}
		$(elem).html(html);
	}
</script>
 
</head>
<body>
<div id="mainContent">
<form action="" method="post">
<fieldset>
<table CELLSPACING="5" BORDER="0" CELLPADDING="5">
<tr>
<td align="right">Secteur : </td>
<td>
<select name="num_salle" id="secteur" tabindex="1" onchange="liste();">
<option value="Tous"> Tous </option>
<?php
mysql_query("SET NAMES utf8");
$affiche_secteur = "SELECT secteur_geographique FROM secteur ORDER BY secteur_geographique ASC" ;
$resultat_secteur = mysql_query($affiche_secteur) or die ('Erreur : '.mysql_error() );
if      (mysql_num_rows($resultat_secteur) == 0)        //On vérifie que la table contient quelque chose
{       echo '<option>Aucun</option>';  }
else
        {       while ( $list_secteur = mysql_fetch_array( $resultat_secteur ) )
                {       echo '<option value="'.$list_secteur['secteur_geographique'].'">'.$list_secteur['secteur_geographique'].'</option>';    }
        }
?>
</select>
</td>
</tr>
<tr>
<td align="right">Nom : </td>
<td>
<select id="conteneur" name="nom2" tabindex="2" ></select>
</td>
</tr>
</table>
</fieldset>
</form>
</div>
</body>
</html>

test_select_lieu.php :

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
<?php
session_start();
header('content-type: application/json; charset=utf-8');
require ('configuration.php');
$sql = connect_sql();
if(isset($_GET['secteur'])){
mysql_query("SET NAMES utf8");
$affiche_nom = "SELECT nom FROM lieu WHERE secteur='".$_GET['secteur']."' ORDER BY nom ASC";
$req = mysql_query($affiche_nom) or die('erreur requete');
$cpt = 0;
while($data = mysql_fetch_assoc($req)){
  $result[$cpt] = $data['nom'];
  $cpt++;
}
$json = json_encore($result);
echo isset($_GET['callback'])? "{$_GET['callback']}($json)": $json;
}
else{echo 'nothing to do here';}
?>

**Bovino** · 06/06/2012, 10h44

Code :

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

var secteur = $(":select[name=num_salle]").value();

Ce n'est pas .value() mais .val()

**fazpedro** · 06/06/2012, 11h26

Désolé Bovino, mais cela ne change pas le résultat

Code :

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

var secteur = $(":select[name=num_salle]").val();

j'ai également modifié la ligne suivante : encode et pas encore...

Code :

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

$json = json_encode($result);

mais pas de sélection dans le deuxième SELECT....

**Bovino** · 06/06/2012, 11h33

Et on peut voir l'objet JSON reçu ?

**fazpedro** · 06/06/2012, 11h38

le résultat de test_select_lieu.php :

Code :

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

["Lieu1","Lieu2","Lieu3","Lieu4"]

**kopax** · 06/06/2012, 21h59

avec firebug, regarde si tu n'as pas des erreurs javascript.

Si dans le NET de firebug il te dit dans ta requete http json que ton objet json est pas vide, c'est que la page php est ok.

Fais un console.log du resultat json.

Un console.log(html)

et du contenaire aussi, fais le ligne par ligne tu va voir ou ca deconne

**fazpedro** · 08/06/2012, 10h10

Bonjour,
cela fonctionne bien !

Merci beaucoup de m'avoir mis sur la piste !

voici mes codes modifiés :

le script java :

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
<script>
$(document).ready(function() {
	var $secteurs = $('#secteurs');
	var $noms = $('#noms');
	$secteurs.on('change', function() {
		var val = $(this).val();
		if(val != '') {
			$noms.empty();
			$.ajax({
				url: 'test_select_lieu.php',
				data: 'secteurs='+ val,
				dataType: 'json',
				success: function(json) {
					$.each(json, function(index, value) {
						$noms.append('<option value="'+ index +'">'+ value +'</option>');
					});
				}
			});
		}
	});
});
</script>

le formulaire :

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
 
<form>
<select id="secteurs" name="secteurs">
<option selected="selected" value=""> Secteur </option>
<?php
mysql_query("SET NAMES utf8");
$affiche_secteur = "SELECT secteur_geographique FROM secteur ORDER BY secteur_geographique ASC" ;
$resultat_secteur = mysql_query($affiche_secteur) or die ('Erreur : '.mysql_error() );
if      (mysql_num_rows($resultat_secteur) == 0)        //On vérifie que la table contient quelque chose
{       echo '<option>Aucun</option>';  }
else
        {       while ( $list_secteur = mysql_fetch_array( $resultat_secteur ) )
                {       echo '<option value="'.$list_secteur['secteur_geographique'].'">'.$list_secteur['secteur_geographique'].'</option>';    }
        }
?>
</select>
<select id="noms" name="noms">
<option selected="selected" value=""> Nom </option>
</select>
</form>

et enfin la base "test_select_lieu.php" :

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
<?php
session_start();
header('content-type: application/json; charset=utf-8');
require ('configuration.php');
$sql = connect_sql();
        if (isset($_GET['secteurs']))
                {       
                        mysql_query("SET NAMES utf8");
                        $affiche_nom = "SELECT nom FROM lieu WHERE secteur='".$_GET['secteurs']."' ORDER BY nom ASC";
                        $req = mysql_query($affiche_nom) or die('erreur requete');
                        $cpt = 0;
                        
                        while($data = mysql_fetch_assoc($req))
                                {
                                        $result[$cpt] = stripslashes($data['nom']);
                                        $cpt++;
                                }
                        $json = json_encode($result);
                        echo isset($_GET['callback'])? "{$_GET['callback']}($json)" : $json;
                }
        else
                {}
?>

**Bovino** · 08/06/2012, 10h23

le script java :

Java et JavaScript n'ont rien à voir...

**fazpedro** · 08/06/2012, 10h49

Oui c'est bien JavaScript...

Deuxième select dynamique

jQuery

Discussions similaires

Partager

Partager