rafraichir une liste déroulante [Résolu]

super-java · 15/10/2007, 12h40

J'ai deux liste déroulante et je dois choisir dans la premiére liste et la deuxiéme doit se rafraichir , j'ai chercher un code sur javascript et ça marche pas,
voici mon code pour les deux listes:

1:

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
 
<label for='Sectactivite'>Secteur d'activité:</label> 
                    <select name='Sectactivite' style='margin:0 15px 0 40px; WIDTH: 138px'>
                    <?php
                                    $requete1="select * from secteur_activites";
                                    $resultat = mysql_query($requete1);
                                    while($row = mysql_fetch_row($resultat))
                                        {
                                        $NUM_SECT = $row[0];
                                        $LIBELLE_SECT = $row[1];
                                        echo "<option value='".$NUM_SECT."'>".$LIBELLE_SECT."</option>";
                                        }
                    ?>
                    </select>

2:

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
 
<label for='activite'>Activité:</label>                        
                    <select name='activite' style='margin-left:52px; WIDTH: 128px'>
                    <?php
                    $requete2 = "select * from activitees,secteur_activites where activitees.num_act = secteur_activites.num_sect";
                    $resultat2 = mysql_query($resultat2);
                    while($row1 = mysql_fetch_row($resultat2))
                    {
                        $NUM_ACT = $row1[0];
                        $LIBELLE_ACT = $row1[1];
                        echo "<option value='".NUM_ACT."'>".$LIBELLE_ACT."</option>";
                    }
                    ?>
                    </select>

et merci pour votre aide.

Raideman · 15/10/2007, 13h36

au vu du code, je dirai que à aucun moment tu ne demandes un quelconque rafraîchissement et que par conséquent, tu ne rafraichiras rien avec ce code.
De plus, il y a des erreurs de syntaxe, et dans le deuxieme select, tu affiches ta liste sans tenir compte des conditions définies par le choix dans la premiere liste. Donc en gros, faut tout faire...

Voici une piste :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
 
<label for='Sectactivite'>Secteur d'activité:</label> 
                    <select name='Sectactivite' style='margin:0 15px 0 40px; WIDTH: 138px' onchange="document.nom_form.submit();">
                    <?php
                                    $requete1="select * from secteur_activites";
                                    $resultat = mysql_query($requete1);
                                    while($row = mysql_fetch_row($resultat))
                                        {
                                        $NUM_SECT = $row[0];
                                        $LIBELLE_SECT = $row[1];
                                        echo "<option value='".$NUM_SECT."'>".$LIBELLE_SECT."</option>";
                                        }
                    ?>
                    </select>

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
 
<label for='activite'>Activité:</label>                        
                    <select name='activite' style='margin-left:52px; WIDTH: 128px'>
                    <?php
                    $requete2 = "select * from activitees where activitees.num_sect = '".$_POST['Sectactivite']."'";
                    $resultat2 = mysql_query($resultat2);
                    while($row1 = mysql_fetch_row($resultat2))
                    {
                        $NUM_ACT = $row1[0];
                        $LIBELLE_ACT = $row1[1];
                        echo "<option value='".$NUM_ACT."'>".$LIBELLE_ACT."</option>";
                    }
                    ?>
                    </select>

Pour résumé, l'attribut onchange sur la boite select permet de définir une action à éxécuter à chaque choix fait dans la liste. Dans ce cas, on soumet le formulaire ( document.nom_form.submit(); => remplacer nom_form par le nom de ton formulaire). Ensuite dans la deuxieme boite select, on faire la requete qui sélectionne toutes les activités qui sotn dans le secteur d'activités précisé dans le select numéro 1 (je présume que c'est ce que tu veux faire).

acirfa · 15/10/2007, 15h35

Je te propose de le faire en Javascript...
Voila une fonction javascript qui resolve ton problème et dans les 2 sens.......

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
<script language="JavaScript">
function moveItem1To2 () {
  var i1 = document.nomduform.list1.selectedIndex;
  var text1 =  document.nomduform.list1.options[i1].text;
  var value1 = document.nomduform.list1.options[i1].value;
  var list2 = document.nomduform.list2;
  list2.options[list2.options.length]= new Option(text1 ,value1);
  document.nomduform.list1.remove(i1);
}
function moveItem2To1 () {
  var text1 =  document.nomduform.list2.options[document.nomduform.list2.selectedIndex].text;
  var value1 = document.nomduform.list2.options[document.nomduform.list2.selectedIndex].value;
  var list1 = document.testForm.list1;
  list1.options[list1.options.length]= new Option(text1,value1);
  document.nomduform.list2.remove(document.nomduform.list2.selectedIndex);
}

Code :

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

1
2
3
4
5
6
7
8
9
 
<form name="nomForm">
<select name="list1" onChange="moveItem1To2()" size=5>
blalalalalblalalla
</select>
<select name="list2" onChange="moveItem2To1()" size=5>
coucoucoucoucouc
</select>
</form>

super-java · 15/10/2007, 15h54

Merci pour votre aide mais ça marche pas, et j'ai essayé avec la fonction xmlhttpRequest avec ce code et ça ne marche pas toujours voici mon code:

Code X :

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
70
71
72
73
74
75
<script type='text/javascript'>
function getXhr(){
var xhr = null;
if(window.XMLHttpRequest) // Firefox et autres
xhr = new XMLHttpRequest();
else if(window.ActiveXObject){ // Internet Explorer
try {
xhr = new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
xhr = new ActiveXObject("Microsoft.XMLHTTP");
}
}
else { // XMLHttpRequest non supporté par le navigateur
alert("Votre navigateur ne supporte pas les objets XMLHTTPRequest...");
xhr = false;
}
return xhr;
}
/**
* Méthode qui sera appelée sur le click du bouton
*/
function go(){
var xhr = getXhr();
// On défini ce qu'on va faire quand on aura la réponse
xhr.onreadystatechange = function(){
// On ne fait quelque chose que si on a tout reçu et que le serveur est ok
if(xhr.readyState == 4 && xhr.status == 200){
leselect = xhr.responseText;
// On se sert de innerHTML pour rajouter les options a la liste
document.getElementById('activite').innerHTML = leselect;
}
}
// Ici on va voir comment faire du post
xhr.open("POST","Activite.php",true);
// ne pas oublier ça pour le post
xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
// ne pas oublier de poster les arguments
// ici, l'id de l'auteur
sel = document.getElementById('Sectactivite');
Sectactivite = sel.options[sel.selectedIndex].value;
xhr.send("Sectactivite="+Sectactivite);
}
</script>

 et mon fichier de select et le voici que j'ai appelé activite.php

<?php
	
	if(isset($_POST["Sectactivite"])){
	$requete2 = "select * from activitees where activitees.NUM_ACT = ".$_POST['Sectactivite']."'";
	$resultat2 = mysql_query($resultat2);
	while($row1 = mysql_fetch_row($resultat2))
	{
		$NUM_ACT = $row1[0];
		$LIBELLE_ACT = $row1[1];
		echo "<option value='".NUM_ACT."'>".$LIBELLE_ACT."</option>";
	}
	}
?>
 et le code de la 1er liste est le suivant:


<label for='Sectactivite'>Secteur d'activité:</label> 
					<select name='Sectactivite' id ='Sectactivite' onchange ='go()' style='margin:0 15px 0 40px; WIDTH: 138px'">
					<?php
									$requete1="select * from secteur_activites";
									$resultat = mysql_query($requete1);
									while($row = mysql_fetch_row($resultat))
										{
										$NUM_SECT = $row[0];
										$LIBELLE_SECT = $row[1];
										echo "<option value='".$NUM_SECT."'>".$LIBELLE_SECT."</option>";
										}
					?>
					</select>

acirfa · 16/10/2007, 10h44

Ahhh si je vois bien les données de ta liste proviennent d'une requete mysql.ce que je te propose c'est de:

1. quand un element est selectionné dans ta premiere liste, tu utilises l'évènement Onchange.tu recupères les l'lement selectionné et tu le rajiutes dans la 2ieme liste. A mon avis tu peux utiliser que du php.

super-java · 16/10/2007, 15h37

j'ai pas compris ce que tu ve dire , les listes que j'utilise sont dinamyques rechargeables d'une base de données mysql.
je travail pas sur des listes statiques.

super-java · 16/10/2007, 16h42

j'ai pu résoudre le pb voici mon code qui marche:

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
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
<?php
	include("connexion.php");
?>
		<script type='text/javascript'>
 
			function getXhr(){
                            var xhr = null;
				if(window.XMLHttpRequest){ // Firefox et autres
				   xhr = new XMLHttpRequest(); 
 
				}
				else if(window.ActiveXObject){ // Internet Explorer 
				   try {
							xhr = new ActiveXObject("Msxml2.XMLHTTP");
						} catch (e) {
							xhr = new ActiveXObject("Microsoft.XMLHTTP");
						}
				}
				else { // XMLHttpRequest non supporté par le navigateur 
				   alert("Votre navigateur ne supporte pas les objets XMLHTTPRequest..."); 
				   xhr = false; 
				} 
                            return xhr;
			}
 
 
 
			/**
			* Méthode qui sera appelée sur le click du bouton
			*/
			function change(){
 
				var xhr = getXhr();
 
				// On défini ce qu'on va faire quand on aura la réponse
				xhr.onreadystatechange = function(){
					//alert(xhr.readyState);
					// On ne fait quelque chose que si on a tout reçu et que le serveur est ok
					if(xhr.readyState == 4 && xhr.status == 200){
						di = document.getElementById('activite');
						di.innerHTML = xhr.responseText;
					}
				}
 
				// Ici on va voir comment faire du post
				xhr.open("POST","Activite.php",true);
				// ne pas oublier ça pour le post
				xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
				// ne pas oublier de poster les arguments
				// ici, l'id de l'auteur
				Sectactivite = document.getElementById('Sectactivite').options[document.getElementById('Sectactivite').selectedIndex].value;
				//alert(idauteur);
				xhr.send("Sectactivite="+Sectactivite);
 
 
			}
		</script>
 
 
<div style="margin:5px 0 0 0;float:left;">						
					<label for='Sectactivite'>Secteur d'activité:</label> 
					<select name='Sectactivite' id ='Sectactivite' onchange='change()' style='margin:0 15px 0 40px; WIDTH: 138px'">
						<option value='-1'>Aucun</option>
					<?php						
						$requete1="select * from secteur_activites";
						$resultat = mysql_query($requete1);
						while($row = mysql_fetch_row($resultat))
						{
							$NUM_SECT = $row[0];
							$LIBELLE_SECT = $row[1];
							echo "<option value='".$NUM_SECT."'>".$LIBELLE_SECT."</option>";
						}
					?>
					</select>
				</div>
				<div>
					<div style="float:left;width:115px;margin-top:5px;">
						<label for='activite'>Activité:</label>
					</div>
					<div  id ='activite' style="margin:0px 0 0 39px;">
						<select name='activite' style='width:128px;'>
							<option value='-1'>Choisir un secteur</option>
						</select>
					</div>
				</div>	
 
 et voici mon fichier Activite.php
 
<?php
	echo "<select name='activite'>";
	if(isset($_REQUEST["Sectactivite"])){
		mysql_connect("localhost","root","emploi");
		mysql_select_db("bd_dt");
		$r = "select NUM_ACT,LIBELLE_ACT from activitees where activitees.num_sect ='".$_REQUEST['Sectactivite']."'";
		$res =  mysql_query($r);
		while($row = mysql_fetch_row($res)){
			$num = $row[0];
			$lib = $row[1];
			echo "<option value='".$num."'>".$lib."</option>";
		}		
	}
	else
		echo "<option value='-1'>Choisir un auteur</option>";
	echo "</select>";
	mysql_close();
?>

et ça marche très bien.

looping2708 · 20/08/2008, 08h37

Citation:

Envoyé par acirfa

Je te propose de le faire en Javascript...
Voila une fonction javascript qui resolve ton problème et dans les 2 sens.......

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
<script language="JavaScript">
function moveItem1To2 () {
  var i1 = document.nomduform.list1.selectedIndex;
  var text1 =  document.nomduform.list1.options[i1].text;
  var value1 = document.nomduform.list1.options[i1].value;
  var list2 = document.nomduform.list2;
  list2.options[list2.options.length]= new Option(text1 ,value1);
  document.nomduform.list1.remove(i1);
}
function moveItem2To1 () {
  var text1 =  document.nomduform.list2.options[document.nomduform.list2.selectedIndex].text;
  var value1 = document.nomduform.list2.options[document.nomduform.list2.selectedIndex].value;
  var list1 = document.testForm.list1;
  list1.options[list1.options.length]= new Option(text1,value1);
  document.nomduform.list2.remove(document.nomduform.list2.selectedIndex);
}

Code :

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

1
2
3
4
5
6
7
8
9
 
<form name="nomForm">
<select name="list1" onChange="moveItem1To2()" size=5>
blalalalalblalalla
</select>
<select name="list2" onChange="moveItem2To1()" size=5>
coucoucoucoucouc
</select>
</form>

Salut,
Script très pratique mais c'est très étrange je n'arrive pas à récupérer les données du select.

Quel est l'astuce?
Merci

looping2708 · 21/08/2008, 13h51

Citation:

Envoyé par looping2708

Salut,
Script très pratique mais c'est très étrange je n'arrive pas à récupérer les données du select.

Quel est l'astuce?
Merci

Finalement, j'ai fait une fonction qui force le select de gauche à être en selected.
for(i=0;i<document.MyForm.list1.length;++i)
if(document.MyForm.list1.options[i].selected == false)
document.MyForm.list1.options[i].selected = true;

@+

16/10/2007, 15h37	#6
super-java Candidat au titre de Membre du Club Inscription : octobre 2007 Messages : 49 Détails du profil Informations forums : Inscription : octobre 2007 Messages : 49 Points : 13 Points : 13	rafraichir une liste déroulante j'ai pas compris ce que tu ve dire , les listes que j'utilise sont dinamyques rechargeables d'une base de données mysql. je travail pas sur des listes statiques.
	00

16/10/2007, 10h44	#5
acirfa Membre confirmé Inscription : juillet 2007 Messages : 201 Détails du profil Informations forums : Inscription : juillet 2007 Messages : 201 Points : 227 Points : 227	Ahhh si je vois bien les données de ta liste proviennent d'une requete mysql.ce que je te propose c'est de: 1. quand un element est selectionné dans ta premiere liste, tu utilises l'évènement Onchange.tu recupères les l'lement selectionné et tu le rajiutes dans la 2ieme liste. A mon avis tu peux utiliser que du php.
	00

Outils de la discussion
Afficher une version imprimable Envoyer un lien vers cette page par email