Récupération de la sélection sur une liste

Version imprimable

Bonjour,

Bon voilà le but de mon bout de code: Je rempli mon select grâce à une requête ajax (ça marche) puis lors de la sélection d'un grossiste (de ma liste) je veux déclancher la construction d'un tableau.

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
 $(function () {
            $('.error').hide();
 
            $.ajax({
                type: "POST",
                url: "Edit_couleur.aspx/GetGrossistes",
                data: '{"PageEnCours":"' + document.location.href.toString() + '"}',
                contentType: "application/json; charset=utf-8",
                dataType: "json",
                success: function (msg) {
                    $('#lstGrossistes').append($('<option>', { value: "-1", text: "Sélectionnez un grossiste" }));
                    if (msg.d != null) {
                        $.each(msg.d, function (i, item) {
                            $('#lstGrossistes').append($('<option>', { value: item.IdGros, text: item.Libelle }));
                        });
                    }
                },
                error: function () {
                    alert('oups');
                }
            });
 
            var CtrlGros = $('#lstGrossistes option:selected');
            var Gros = CtrlGros.val();
 
            $('#lstGrossistes').change(function () {
                if (Gros == "-1") {
                    $('#divcouleur').html("");
                }
                else {
                    $.ajax({
                        type: "POST",
                        url: "Edit_couleur.aspx/GetCouleur",
                        data: '{"IdGros":' + Gros + ',"PageEnCours":"' + document.location.href.toString() + '"}',
                        contentType: "application/json; charset=utf-8",
                        dataType: "json",
                        success: function (msg) {
                            BuildTable(msg);
                        }
                    });
                }
            });
 
 
 
        });

Mon problème est que var

Code:

var Gros = CtrlGros.val();

me renvoie undifined

Quand je regarde le code généré sur ma liste j'ai

Code:

1
2
3
4
5
 <p style="float: right;">
    <select id="lstGrossistes">
    </select>
 
    </p>

quelqu'un peut me dire comment récupérer proprement mon item sélectionné dans ma liste?

15/03/2013, 12h19
Bovino

:recherch:

Expliqué et résolu un nombre incalculable de fois !
Tu essayes d'utiliser des données avant de les avoir reçues !

Pas vraiment d'accord je viens de tomber sur ce site

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
$('#lstGrossistes').change(function () {
                var Gros = $(this).val();
                if (Gros == "-1") {
                    $('#divcouleur').html("");
                }
                else {
                    $.ajax({
                        type: "POST",
                        url: "Edit_couleur.aspx/GetCouleur",
                        data: '{"IdGros":' + Gros + ',"PageEnCours":"' + document.location.href.toString() + '"}',
                        contentType: "application/json; charset=utf-8",
                        dataType: "json",
                        success: function (msg) {
                            BuildTable(msg);
                        }
                    });
                    $('.error').hide();
                }
            });

Avec cette syntaxe , ça marche

La différence

Code:

var Gros = $(this).val();

alors qu'avant je passait par $('#lstGrossistes option:selected').val();

Par contre tu as peut être raison ...

ma fonction

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
function BuildTable(msg) {
            var table = '<table><thead><tr class="Entete"><th>Libellé</th><th>Code</th><th colspan="2"></th></thead><tbody>';
 
            for (var post in msg.d) {
                var row = '<tr id=' + msg[post].IdCouleur + '>';
 
                row += '<td>' + msg[post].Libelle + '</td>';
                row += '<td>' + msg[post].IdCouleurGros + '</td>';
                row += '<td>' + '</td>';
                row += '<td><img src="/Images/suppr.png" alt="Supprimer" id="Delete"></td>';
 
                row += '</tr>';
 
                table += row;
            }
 
            //Pied pour ajout
             table += '<tr class="Entete2"><td><input type="text" id="txtCouleur" /><br /><label class="error" for="txtCouleur" id="Lib_error">Champs Libellé obligatoire.</label></td>'
             table += '<td><input type="text" id="txtCode" /><br /></td>'
             table += '<td><br /><input type="hidden" id="LogoName" /><div id="MyDiv"></div>'
 
             table += '<br /><label class="error" id="Img_error">Champs Image obligatoire.</label></td>'
             table += '<td><img src="/Images/add.png" alt="Ajouter" id="Add" /></td></tr>'
 
            table += '</tbody></table>';
 
            $('#divcouleur').html(table);
        };

Plus particulièrement cette ligne:

Code:

table += '<br /><label class="error" id="Img_error">Champs Image obligatoire.</label></td>'

Elle eest bien créée
Mais sur mon change de ma liste de grossistes je lui dit de les cacher

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
 $('#lstGrossistes').change(function () {
                var Gros = $(this).val();
                if (Gros == "-1") {
                    $('#divcouleur').html("");
                }
                else {
                    $.ajax({
                        type: "POST",
                        url: "Edit_couleur.aspx/GetCouleur",
                        data: '{"IdGros":' + Gros + ',"PageEnCours":"' + document.location.href.toString() + '"}',
                        contentType: "application/json; charset=utf-8",
                        dataType: "json",
                        success: function (msg) {
                            BuildTable(msg);
                        }
                    });
                    $('.error').hide();
                }
            });

Mais au final ... il apparaissent à l'écran
quand je fait afficher le code source

Code:

1
2
 <div id="divcouleur">
    </div>

c'est vide alors qu'à l'écran j'ai bien mon tableau ...:aie: