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

Bonjour à tous,

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

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:

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 ! ;)

le plus simple

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

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

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... :aie:

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. :koi:

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:

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:

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>