Ajout d'une information dans un select

Version imprimable

Bonjour,

je recherche à ajouter une information récupérée en AJAX dans mon select en HTML. Voir le screen pour mieux comprendre.
- Pièce jointe 344449

Quand je sélectionne une date, dans mes select, j'ai le nombre de Fax et Mails entre parenthèse, exemple : Fax à valider (32), Mails en cours (64) etc...

Pour ça, j'ai ce morceau de code en JS qui va récupérer mon nombre

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
$(document).on("change", "#NumInt, #NomCli, #FaxMail, #TypeDoc, #DateCreaDeb, #DateCreaFin, #DevisNonRep", function() {
 
        var id = "&lt;?php echo $id;?&gt;";
        var NumInt = $("#NumInt").val();
        var NomCli = $("#NomCli").val();
        var FaxMail = $("#FaxMail").val();
        var TypeRech = "";
        var TypeDoc = $("#TypeDoc").val();
        var DateCreaDeb = $("#DateCreaDeb").val();
        var DateCreaFin = $("#DateCreaFin").val();
        var DevisNonRep = $("#DevisNonRep").val();
 
        for($i=0;$i&lt;2;$i++)
        {
            if($i==0){
                TypeRech = "Fax";
            }
            else
            {
                TypeRech = "Mails";
            }
 
            $.ajax({
                "url":"ChargeNbFaxMail.php",
                "type":"POST",
                "data":{
                    "id": id, "NumInt": NumInt, "NomCli": NomCli, "FaxMail": FaxMail, "TypeRech": TypeRech, "TypeDoc": TypeDoc, "DateCreaDeb": DateCreaDeb, "DateCreaFin": DateCreaFin, "DevisNonRep": DevisNonRep,
                },
                "dataType":"json",
                "success":function(data){
                    data.TypeRech;
                    data.AValider;
                    data.EnCours;
                    data.NonEnvoyes;
                    data.Envoyes;
                    data.Total;
 
                    var table = new Array();
                    table[0]=data.AValider;
                    table[1]=data.EnCours;
                    table[2]=data.NonEnvoyes;
                    table[3]=data.Envoyes;
                    table[4]=data.Total;
                },
            });
        }
    });

- Et mon select basique en HTML

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<td>
  <select name="selectFax" id="selectFax" size=5>
    <option value="FaxaValider">Fax à valider</option>
    <option value="FaxenCours">Fax en cours</option>
    <option value="FaxnonEnvoyes">Fax non envoyés</option>
    <option value="FaxEnvoyes">Fax envoyés</option>
    <option value="FaxTous">Tous les fax</option>
  </select>
</td>
<td>
  <select name="selectMail" id="selectMail" size=5>
    <option value="MailaValider">Mails à valider</option>
    <option value="MailenCours">Mails en cours</option>
    <option value="MailnonEnvoyes">Mails non envoyés</option>
    <option value="MailEnvoyes">Mails envoyés</option>
    <option value="MailTous">Tous les mails</option>
  </select>
</td>

Comment puis-je ajouter mes data entre parenthèse dans mon select ?

Merci d'avance.

avec jQuery, vous pouvez modifier l'affichage d'une option comme cela :

Code:

1
2
3
4
5
6
    var nombre = 42;
    var texteElement = $("#selectMail option[value=\"MailaValider\"]").text();
 
    texteElement += " (" + nombre + ")";
 
    $("#selectMail option[value=\"MailaValider\"]").text(texteElement);

22/01/2018, 14h07
Castiel777

1 pièce(s) jointe(s)

Comment je peux enlever les undefined ? :)
Pas moyen avec un if, je dois mal m'y prendre
Pièce jointe 344472
22/01/2018, 14h51
mathieu
"undefined" est un type spécial donc il faut tester comme cela :
Code:

1 2 3 4 if ("undefined" !== typeof nombre) { // le nombre est défini }
22/01/2018, 14h54
Castiel777

1 pièce(s) jointe(s)

Super ça fonctionne, je connaissais != mais pas !==

Mince je rencontre un problème, lorsque je sélectionne une autre date, les anciennes valeurs ne se mettent pas à jour et créer une autre colonne avec les nouvelles valeurs.
Comment puis-je gérer cela ?
Il faudrait que je clear en début de ma fonction

Merci beaucoup pour ton aide mathieu

Pièce jointe 344503
22/01/2018, 17h00
Castiel777

Aurais-tu une idée mathieu ? ou quelqu'un d'autre ?
22/01/2018, 18h49
mathieu

le texte initial peut être stocké dans un attribut "data" comme ça :

Code:

<option value="MailaValider" data-texte-initial="Mails à valider">Mails à valider</option>

et pour l'utilisation en jQuery c'est comme ça :

Code:

var texteElement = $("#selectMail option[value=\"MailaValider\"]").data("texteInitial");
23/01/2018, 10h22
Castiel777

1 pièce(s) jointe(s)

Bonjour,

j'ai fait mon code autrement, avec un .append, plus pratique dans mon cas, le problème que je rencontre est le "undefined" qui s'affiche, j'ai mis un if pour tester si c'est différent de cette value pour gérer mes parenthèses mais la value s'affiche toujours :/
Une idée ?

Pièce jointe 344738
Quand c'est égal à undefined, ça veut dire 0, or quand c'est égal à 0, je ne veux pas les parenthèses
23/01/2018, 15h30
Toufik83

"undefined" apparaît lorsque les valeurs de tes variables ne sont pas définient, donc ajoute un block else pour gérer ça.

Code:

if(undefined !== typeof data.AValider) table[0] = " (" + data.AValider + ")" else table[0]='';

(même chose pour les autres variables).
23/01/2018, 17h08
Watilin

Attention à ne pas confondre

Code:

if ("undefined" !== typeof data.AValider)

et

Code:

if (undefined !== data.AValider)

Dans le premier cas, on compare typeof avec la chaîne "undefined" (typeof renvoie toujours des chaînes) ; dans le second on compare directement notre variable à la valeur undefined.

Dans le second cas, il peut être intéressant de passer en mode strict pour s’assurer que la valeur undefined n’est pas redéfinie, soit par accident, soit par un script malicieux.
24/01/2018, 09h36
Castiel777

Tout est OK :) merci pour votre aide !