Liste déroulante récupérer la valeur sans bouton et sans réactualiser la page

**benhsaien** · 28/06/2011, 19h31

Bonjour,

J'ai une balise liste déroulante. Je voudrais quand je sélectionne une valeur, la récupérer sans bouton submit et sans actualiser la page, car si la page et actualisée la valeur de la liste déroulante va être initialisée.

merci d'avance !!!!

**Bisûnûrs** · 28/06/2011, 20h29

Ca se fait en Javascript.
Cf la FAQ :
http://javascript.developpez.com/faq...amps#valSelect

**benhsaien** · 28/06/2011, 23h02

Bonjour,
j'ai mis un exemple de ce genre mais s'amarche pas :

Code :

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

1
2
3
4
5
6
7
8
9
10
<select name='liste'>
<option>en cours</option>
<option>valider</option>
<option>annuler</option>
</select>	
 
<script langage="javascript">
var a=document.getElementById('liste').options[document.getElementById('liste').selectedIndex].text);
document.write(a);
</script>

**Eric2a** · 28/06/2011, 23h21

Salut,

Essaie ceci...

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
 
<!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" />
<title>Liste</title>
<script type="text/javascript">//<![CDATA[
        function update(){
                var elt,val,opt;
                elt=document.getElementById('list');
                val=elt.value;
                if(val!==''){
                        opt=elt.options[val].text;
                        alert('Vous avez sélectionnez l\'élement #'+val+' ('+opt+')');
                }
        }
//]]>
</script>
</head>
<body>
<form action="#" method="get">
	<p>
		<label for="list">Votre sélection :</label>
		<select name="list" id="list" onchange="update();">
			<option value="" selected="selected">Choisissez un élément</option>
			<option value="1">Air</option>
			<option value="2">Eau</option>
			<option value="3">Terre</option>
			<option value="4">Feu</option>
		</select>
	</p>
</form>
</body>
</html>

**benhsaien** · 28/06/2011, 23h32

Merci Eric2a
mais je veux récupérer le valeur a travers php:

Code :

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

1
2
3
4
<?php 
$valeur= "<script type='text/javascript'>document.write(trace)</script>" ;
echo $valeur;
?>

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">//<![CDATA[
	function update(){
		var elt,val,opt;
		elt=document.getElementById('list');
		val=elt.value;
		if(val!==''){
			opt=elt.options[val].text;
			//alert('Vous avez sélectionnez l\'élement #'+val+' ('+opt+')');
			var trace=opt;
		}
	}
//]]>
</script>

????

**Bisûnûrs** · 28/06/2011, 23h44

Tu te fourvoies complètement là .. Le PHP est exécuté côté serveur, donc quand le code s'affiche côté client et que le Javascript est disponible, le PHP n'existe déjà plus depuis longtemps.

**benhsaien** · 28/06/2011, 23h53

Oui je sais mais y'a t'il une solution ou astuce pour ce genre de cas ???

**Bisûnûrs** · 29/06/2011, 00h00

AJAX.

**benhsaien** · 29/06/2011, 00h04

ok je vais voir de cette coté et si t'a une exemple n'esite pas

merci !!!

**NoSmoking** · 29/06/2011, 00h14

Envoyé par benhsaien

J'ai une balise liste déroulante. Je voudrais quand je sélectionne une valeur, la récupérer sans bouton submit et sans actualiser la page, car si la page et actualisée la valeur de la liste déroulante va être initialisée.

c'est en partie faux.

- Lorsque tu crées ta page pour la première fois tu choisis toi même de mettre une option en selected.
- Lors de la soumission il te suffit de récupérer via $_POST or $_GET la valeur de l'option sélectionnée
- Lors du renvoie de la page rien ne t'empêches de mettre en selected cette option...
http://php.developpez.com/cours/?pag...ge#formulaires

**benhsaien** · 29/06/2011, 00h21

oui mais pour recupérer la valeur avec $_POST je doit avoir un button submit et c'est sa se que veux pas.je veu si il selectionne je la recupére.

**NoSmoking** · 29/06/2011, 00h27

Envoyé par benhsaien

oui mais pour recupérer la valeur avec $_POST je doit avoir un button submit et c'est sa se que veux pas.je veu si il selectionne je la recupére.

drôle d'idée !!
Tu peux également soumettre sur le onchange, mais je trouve cela moyen, donc regardes du coté de l'AJAX comme te la soumis Bisûnûrs

**benhsaien** · 29/06/2011, 00h37

puisque j'ai jamais touché a ajax si vous pouver me donner un exemple je serait ravie !!!!!

**NoSmoking** · 29/06/2011, 00h42

Les Cours
http://ajax.developpez.com/cours/
Les FAQs
http://javascript.developpez.com/faq...ipt/?page=Ajax
sans oublier le forum
http://www.developpez.net/forums/f23...eb/javascript/
fourmillent d'exemples...

**benhsaien** · 29/06/2011, 00h44

merci NoSmoking
pour les manifique lien.mais question de contraint de temp plus je suis que passagére de ajax un exemple direct sa sera super.si c'est possible !!!!!

**Eric2a** · 29/06/2011, 01h12

Avec les cookies.

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
52
53
54
55
56
57
58
59
60
61
62
63
 
<!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" />
<title>Test</title>
<script type="text/javascript">//<![CDATA[
 
        function createCookie(name,value,days) {
                if (days) {
                        var date = new Date();
                        date.setTime(date.getTime()+(days*24*60*60*1000));
                        var expires = "; expires="+date.toGMTString();
                }
                else var expires = "";
                document.cookie = name+"="+value+expires+"; path=/";
        }
        function readCookie(name) {
                var nameEQ = name + "=";
                var ca = document.cookie.split(';');
                for(var i=0;i < ca.length;i++) {
                        var c = ca[i];
                        while (c.charAt(0)==' ') c = c.substring(1,c.length);
                        if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length,c.length);
                }
                return null;
        }
        function eraseCookie(name) {
                createCookie(name,"",-1);
        }
 
        function update_Selection(){
                var v=document.getElementById('list').value;
                if(v)
                        createCookie('selectedValue',v);
                else
                        eraseCookie('selectedValue');
        }
 
        function init_Selection(){
                var v=readCookie('selectedValue');
                if(v)document.getElementById('list').options[v].selected=true;
        }
 
        window.onload=init_Selection;
//]]>
</script>
</head>
<body>
<form action="#" method="get">
	<p>
		<label for="list">Votre sélection :</label>
		<select name="list" id="list" onchange="update_Selection();">
			<option value="" selected="selected">Choisissez un élément</option>
			<option value="1">Air</option>
			<option value="2">Eau</option>
			<option value="3">Terre</option>
			<option value="4">Feu</option>
		</select>
	</p>
</form>
</body>
</html>

Voir

La gestion des cookies en JavaScript

**nadox** · 29/06/2011, 09h51

Bonjour,

Envoyé par benhsaien

Oui je sais mais y'a t'il une solution ou astuce pour ce genre de cas ???

Tu ne nous donne pas beaucoup de détails sur le cas...
Pourquoi veux tu récupérer une valeur sans recharger la page ? Que veux tu en faire ?
Si tu veux en faire quelque chose sur le serveur, il n'y a pas trop le choix : poster un formulaire ou envoyer la valeur en Ajax.