Déplacer "selected" d'une option de liste

**Sanceray3** · 24/09/2009, 11h02

Bonjour à tous,

voilà je vous explique mon problème. J'ai une liste déroulante définit comme cela :

Code :

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

1
2
3
4
5
6
 
<select name="lst_etat" id="lst_etat" >
   <option value='1' selected="selected">Brouillon</option>
   <option value='2'>A valider</option>
   <option value='3'>Validé</option>
</select>

Ce que je souhaite c'est sur un événement, redéfinir l'option "selected" sur l'élément que je souhaite. J'ai donc utilisé le ciblage par value comme ci-dessous :

Code :

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

1
2
3
 
$("#lst_etat option:selected").removeAttr("selected");
$("#lst_etat option[value='2']").attr("selected","selected");

Mais ça ne fonctionne pas, uniquement avec la commande "attr", quand je fais un remove par value ça fonctionne très bien.

Savez vous comment est ce que je peux faire dans mon cas de figure pour déplacer mon "selected" sur l'élément de mon choix.

Par avance grand merci de votre retour !

**Sourrisseau** · 25/09/2009, 15h12

est de passe dans ton js l'attribut selected a un autre élément. Comme tu l'as écris :

Code :

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

1
2
 
$("#lst_etat option[value='2']").attr("selected","selected");

en fait l'attribut est supprimé automatiquement de l'autre élément .

Dis moi si ma réponse te conviens. merci

**danielhagnoul** · 25/09/2009, 20h21

Bonsoir.

Hier j'ai construit un petit code de test. Dans ce test, on peut modifier la sélection manuellement ou avec le bouton Change. Le bouton Etat affiche l'<option> sélectionnée

Tout ce passe comme il se doit sauf...

En cours de test, j'ai examiner le code avec Firefox-Firbug ou le code source généré avec Firefox : je suis déconcerté par le résultat.

Je sais que l'on différencie l'attribut selected d'une <option> et la propriété selected, mais je ne m'explique pas pourquoi le code HTML généré ne reflète pas les modifications que j'y fait lorsque je modifie l'<option> sélectionnée.

Quel que soit l'<option> sélectionnée en cours de test, dans le code source généré l'<option> marquée avec l'attribut selected à l'ouverture de la page reste tel quel.

En pratique, il suffit donc bien d'utiliser : $("#lst_etat option").eq(i).attr({selected:"selected"}); ou $("#lst_etat option[value='2']").attr({selected:"selected"}) ou $(this).attr({selected:"selected"}); pour modifier l'<option> sélectionnée

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" />
    <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;
        }
        h1,h2,h3,h4,h5 {
            font-family:"Times New Roman", Times, serif;
        }
        div,p,h1,h2,h3,h4,h5,h6,ul,ol,dl,form,table,img {
            margin:0px;
            padding:0px;
        }
        p {
            padding:6px;
        }
        ul,ol,dl {
            list-style:none;
            padding-left:6px;
            padding-top:6px;
        }
        li {
            padding-bottom:6px;
        }
        div#conteneur {
            width:95%;
            margin:12px auto;
            padding:6px;
            background-color:#FFFFFF;
            color:#000000;
            border:1px solid #666666;
            font-size:0.8em;
        }        
        div#affiche {
            margin:12px;
            border:1px solid #999999;
        }
    </style>
    <script type="text/javascript" src="../lib/jquery-1.3.2.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function() {
            var n = $("#lst_etat option").length;
            var i = 0;
 
            $("#btnEtat").click(function(){
                $("#affiche").append("<p>" + $("#lst_etat option:selected").text() + "</p>");
            });
 
            $("#btnChange").click(function(){
                i++;
                if (i >= n) i = 0;
 
                $("#lst_etat option").eq(i).attr({selected:"selected"});
            });
        });        
    </script>
</head>
<body>
    <div id="conteneur">
        <button id="btnEtat" type="button">Etat</button>
        <select name="lst_etat" id="lst_etat" >
             <option value="1" selected="selected">Brouillon</option>
             <option value="2">A valider</option>
             <option value="3">Validé</option>
        </select>
        <button id="btnChange" type="button">Change</button>
        <div id="affiche"></div>
    </div>
</body>
</html>

On peut également utiliser val() :

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
 
    <script type="text/javascript">
        $(document).ready(function() {
            var tab = ["Brouillon", "A valider", "Validé"];
            var n = tab.length;
            var i = 0;
 
            $("#btnEtat").click(function(){
                $("#affiche").append("<p>" + $("#lst_etat").val() + "</p>");
            });
 
            $("#btnChange").click(function(){
                i++;
                if (i >= n) i = 0;
 
                console.log(i);
 
                $("#lst_etat").val(tab[i]);
 
                // pour une sélection multiple : $("#multiple").val(["Multiple2", "Multiple3"]);
            });
        });        
    </script>
</head>

Déplacer "selected" d'une option de liste

jQuery

Discussions similaires

Partager

Partager