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 ?

Deuxième select dynamique

jQuery

Vue hybride

Discussions similaires

Partager

Partager