Select et évènement click

**Blowdi** · 20/04/2009, 16h12

Bonjour a tous

Voici la situation:

J'ai une zone select avec des options. A chaque click sur la zone du select, une requête Ajax est faite afin de récupérer une mise à jour de la liste

De base j'ai :

Code :

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

<select name="select" id="zone_select">	</select>';

Dans le document.ready :

Code :

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

1
2
3
4
5
6
7
8
9
$("#zone_select").click(function() 
        {
	      $("#zone_select").load("ma_page.php?req=liste");
	}); 
(Envoie en retour les <option></option> qui seront ajoutés à ma Liste déroulante)
 
		$("#zone_select option").change(function() {
			alert($(this).val());
		});

Le problème est le suivant :
Lorsque je click sur une option (sous-élément du select), la liste est remise à zéro(car rechargée par le Load) et je perds ainsi l'option sélectionnée.

Comment préciser que je ne souhaite que mettre à jour lors du premier click sur la listBox .

Merci pour tout

**danielhagnoul** · 20/04/2009, 20h29

Bonsoir.

Suggère :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
 
        $(document).ready(function(){
            $("#zone_select").one("click", function(){
                  alert("C'est le premier click");
                return false;
            });
 
            $("#zone_select").change(function(){
                alert($(this).val());
            });
        });

**Blowdi** · 21/04/2009, 00h29

Salut Daniel,

Merci pour la réponse et le temps que tu as pris.

Malheureusement, la fonction one ne marchera qu'une seule fois et dans mon cas, la liste ne sera rechargée qu'une seule fois à cause de cette fonction.

Comment peut-on différencier le click sur le select et le click pour les fils (<option>).

Le $("#zone_select") fait hériter son comportement a toutes les balises incluses (toutes les options) ce qui me gêne forcement

**danielhagnoul** · 21/04/2009, 20h03

Bonsoir.

Il ne faut pas dérouter l'utilisateur du fonctionnement normal de la liste de choix. Déjà, se servir du premier clic peut laisser croire à l'utilisateur que la liste ne fonctionne pas.

Même si par quelque bidouille vous y arriviez sous F3 cela ne fonctionnerait pas sous IE voir mon message http://www.developpez.net/forums/d72...a/#post4212824 qui faisait suite à http://www.developpez.net/forums/d72...y/#post4201452

Il faut modifier l'architecture du programme. Exemple :

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
 
<!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">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="Author" content="Daniel Hagnoul" />
    <meta name="Description" content="Expace de travail du webmestre." />
    <meta name="Keywords" content="jquery, javascript, json, html, css, exercices, plugin, documentation" />
    <meta http-equiv="Robots" content="none, noindex, nofollow" />
    <meta name="Robots" content="none, noindex, nofollow" />
    <title>Page type</title>
    <style type="text/css">
        body {
            background-color:#696969;
            color:#000000;
            font-family:Arial, Helvetica, sans-serif;
            font-size:medium;
            font-style:normal;
            font-weight:normal;
            line-height:normal;
            letter-spacing:normal;
        }
        div,p,h1,h2,h3,h4,h5,h6,ul,ol,dl,form,table,img {
            margin:0px;
            padding:0px;
        }
        div#conteneur {
            width:95%;
            margin:12px auto;
            padding:6px;
            background-color:#FFFFFF;
            color:#000000;
            border:1px solid red;
            font-size:0.8em;
        }
        div#conteneur p {
            margin-bottom:12px;
        }
        div#affiche {
            margin:12px;
            border:1px solid red;
        }
        select#liste {
            visibility:hidden;
        }
    </style>
    <script type="text/javascript" src="../lib/jquery-1.3.2.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function(){
            $("#updateListe").click(function(){
                //mettre à jour
                $("#liste").append("<option value='7'>Choix 7</option>");
 
                $("#liste").css("visibility", "visible");
                return false;
            });
 
            $("#liste").change(function(){
                var str = $("#liste option:selected").attr("value");
 
                  $("#affiche").text(str);
 
                $("#liste").css("visibility", "hidden");
            });
        });
    </script>
</head>
<body>
    <div id="conteneur">
        <button id="updateListe" type="button">Cliquez-moi pour mettre la liste des choix à jour, puis choisissez : </button>
        <select id="liste">
            <option value="1">Choix 1</option>
            <option value="2" selected="selected">Choix 2</option>
            <option value="3">Choix 3</option>
            <option value="4">Choix 4</option>
            <option value="5">Choix 5</option>
            <option value="6">Choix 6</option>
        </select>
        <div id="affiche"></div>
    </div>
</body>
</html>

**Blowdi** · 22/04/2009, 13h37

Salut daniel,

Merci pour ta réponse. J'ai vu ton thread et tu as raison, je ne souhaite pas avoir un comportement bizarre sur IE 6.

Encore merci pour tout

Select et évènement click

jQuery

Vue hybride

Discussions similaires

Partager

Partager