Select et évènement click

Version imprimable

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:

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

Dans le document.ready :
Code:

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

Bonsoir.

Suggère :

Code:

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());
            });
        });

21/04/2009, 00h29
Blowdi

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

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:

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>

22/04/2009, 13h37
Blowdi

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