Deuxième select dynamique

Version imprimable

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:

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:

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:

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>';        }
        }
?>

Ton javascript

Code:

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:

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';
}
?>

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

test_select.php :

Code:

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:

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';}
?>

06/06/2012, 10h44
Bovino

Code:

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

:nono:
Ce n'est pas .value() mais .val() ;)
06/06/2012, 11h26
fazpedro

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

Code:

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

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

Code:

$json = json_encode($result);

mais pas de sélection dans le deuxième SELECT....:oops:
06/06/2012, 11h33
Bovino

Et on peut voir l'objet JSON reçu ?
06/06/2012, 11h38
fazpedro

le résultat de test_select_lieu.php :

Code:

["Lieu1","Lieu2","Lieu3","Lieu4"]
06/06/2012, 21h59
kopax

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 :)

Bonjour,
cela fonctionne bien ! :mouarf:
Merci beaucoup de m'avoir mis sur la piste !

voici mes codes modifiés :

le script java :

Code:

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:

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:

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
                {}
?>

08/06/2012, 10h23
Bovino

Citation:

le script java :

:no:

Java et JavaScript n'ont rien à voir...
08/06/2012, 10h49
fazpedro

Oui c'est bien JavaScript...:oops: